/*
Theme Name: visonsalon_original
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: This is the cssfile to normalize and customize of this site. If you want to write original common css for this site, you should write here not "style.css"!
Version: 1.0.0
*/
html {
	font-size: 16px;
}
:root {
	--wp--preset--font-size--normal: 18px;
	--wp--preset--letter-spacing: 1px;
	--wp--preset--line-height: 2.5;
	
	--contwide-01: 1200px;
	--contwide-02: 1080px;
	--contwide-03: 970px;
	--contwide-04: 680px;
	--contwide-05: 1366px;

	--bgcolor-01: #FDFCFA;
    --bgcolor-02: #FFF;
	--bgcolor-03: #C3C3C3;
	--bgcolor-04: #E9E9E9;
	--bgcolor-05: #F6F3ED;

	--thcolor-01: #483C34;
	--thcolor-02: #EC6B38;
	--thcolor-03: #F3C262;
	--thcolor-04: #F8CC8B;
	--thcolor-05: #8f8d8d;

	--ffamiliy-01 : 'EB Garamond', serif;
	--ffamiliy-02 : 'Shippori Mincho', serif;

	--line-height01: 1.5;
}
*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: var(--bgcolor-01);
	font-family: var(--ffamiliy-02);
	letter-spacing: var(--wp--preset--letter-spacing);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 500;
}
i::before,
i::after {
	font-family: "Font Awesome 6 Free";
}
.forSp,
.widgettitle {
	display: none;
}
@media screen and (max-width: 780px) {
/*	
html {
	font-size: 14px;
}
*/
.forPc,
.pcBr {
	display: none;
}
.forSp,
.spBr {
	display: block;
}
}
a {
	transition: all 0.3s;
	text-decoration: none;
	display: block;
	word-break:break-all;
	color: #333;
}
ul, ol, dd { margin: 0; }
ul li, ol li { list-style: none; }
/*-------------------------------
　　コンテンツ幅の調整
-------------------------------*/
.innerWide {
        max-width: var(--contwide-05);
        width: 100%;
        margin: auto;
}
.innerBlock,
.tileTtl{
        max-width: var(--contwide-01);
        width: 100%;
        margin: auto;
}
.innerBox {
        max-width: var(--contwide-02);
        width: 100%;
        margin: auto;
}
.innerCont {
        max-width: var(--contwide-03);
        width: 100%;
        margin: auto;
}
.bageBox {
        background: var(--bgcolor-05);
        padding: 15px 20px 30px;
}
@media screen and (max-width: 768px) {
.bageBox {
        padding: 15px 10px 30px;
}
}
/*-------------------------------
　　アニメーション
-------------------------------*/
.bottomIn[data-emergence=hidden] {
		opacity: 0;
}
.bottomIn[data-emergence=visible] {
		animation: bottomIn 1.5s cubic-bezier(0.22, 1, 0.36, 1);
		animation-fill-mode: forwards;
}
@keyframes bottomIn {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 50);
  }
  100% {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
.maskOut[data-emergence=hidden] {
		filter: blur(40px);
}
.maskOut[data-emergence=visible] {
		/*filter: blur(40px);*/
		animation-delay: 2.5s;
		animation: blur 0.8s;
		animation-fill-mode: forwards;
}
@keyframes blur{
  from {
    filter: blur(40px);
  }
  to {
    filter: blur(0);
  }
}
.opacityIn[data-emergence=hidden] {
		opacity: 0;
}
.opacityIn[data-emergence=visible] {
		animation: opacityIn 0.8s;
}
@keyframes opacityIn{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*-------------------------------
　　ロゴ
-------------------------------*/
.logo {
	width: 190px;
}
/*-------------------------------
　　タイトル
-------------------------------*/
.pageTtl {
        font-size: 4rem;
        font-weight: 100;
}
.orange { color: var(--thcolor-02); }

.postArea h3,
.lineTtl {
        font-size: 28px;
        display: flex;
        align-items: center;
        padding: 0 0 40px;
        gap: 15px;
		font-weight: 600;
}
.postArea h3::before,
.lineTtl::before {
        content: '';
        width: 80px;
        height: 1px;
        background: var(--thcolor-01);
}
.postArea h2,
.orangeTtl {
	        font-size: 30px;
	        color: var(--thcolor-02);
	        padding: 0 0 30px;
			line-height: normal;
}
@media screen and (max-width: 1080px) {
.postArea h2,
.orangeTtl {
        padding: 0 0 25px;
        font-size: 25px;
}
}
.boxTtl {
        display: flex;
        align-items: baseline;
		gap: 0 5px;
}
.boxTtl::before {
        content: '';
        display: inline-block;
        width: 15px;
        height: 15px;
        background: var(--thcolor-01);
        flex-shrink: 0;
}
.grayBox {
        background: var(--bgcolor-04);
        text-align: center;
		width: 100%;
}
.tile,
.tile::before,
.tile::after {
        width: 12px;
        height: 12px;
        display: block;
}
.tile::before,
.tile::after {
        content: '';
        position: absolute;
}
.tile {
        background: #F3C262;
        margin: 0 20px 5px;
        position: relative;
}
.tileTtl .wrap {
		display: block;
		width: fit-content;
}
.tile::before {
        background: #EC6B38A6;
        left: -15px;
}
.tile::after {
        background: #F6F3ED;
        right: -15px;
}
.tileTtl .txt {
        font-weight: 700;
        font-size: 33px;
}
.tileTtl .wrap {
	width: fit-content;
}
.minTtl {
        color: var(--thcolor-02);
        border-bottom: solid 1px var(--bgcolor-03);
        width: fit-content;
        line-height: 2.5;
        font-weight: 700;
        margin: 0 0 15px;
		font-size: 20px;
}
@media screen and (max-width: 768px) {
.orangeTtl {
        font-size: 23px;
}
.postArea h3,
.lineTtl {
        font-size: 21px;
		flex-direction: column;
		gap: 10px;
		align-items: baseline;
		padding: 0 0 30px;
}
.lineTtl::before {
		order: 1;
}
.tileTtl .txt {
        font-size: 25px;
}
.minTtl {
		line-height: 1.6;
    	font-size: 18px;
		margin: 0 0 10px;
}
.boxTtl {
        font-size: 16.5px;
}
.boxTtl::before {
		width: 13px;
		height: 13px;
}
}
/*-------------------------------
　　arrow
-------------------------------*/
.arrow,
.switch,
.download,
.antab {
	display: flex;
	align-items: center;
	transition: all 0.3s;
	gap: 0 5px;
}
.arrow::after,
.switch::after {
	content: '\f105';
	border-radius: 50px;
	border: solid 1px;
	font-size: 12px;
}
.download::after {
	content: '\f1c1';
	font-size: 20px;
}
.antab::after {
	content: '\f08e';
	color: var(--thcolor-02);
}
.arrow::after,
.switch::after,
.download::after,
.antab::after {
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	transition: all 0.3s;
	font-family: "Font Awesome 6 Free";
	display: grid;
	place-content: center;
	font-weight: 600;
}
/*-------------------------------
　　ボタン
-------------------------------*/
.orangeBtn {
	color: var(--bgcolor-02);
	background: var(--thcolor-02);
	border: solid 2px var(--thcolor-02);
	padding: 7px 10px;
	width: fit-content;
	font-size: 1rem;
	border-radius: 5px;
	font-weight: 600;
}
.orangeBtn::after {
	color: var(--bgcolor-02);
}
.orangeBtn.arrow::after {
		border-color: var(--bgcolor-02);
}
.orangeBtn:hover {
	color: var(--thcolor-02);
	background: var(--bgcolor-02);
}
.orangeBtn:hover::after {
	color: var(--thcolor-02);
	border-color: var(--thcolor-02);
}
a.orange {
	display: inline-block;
	text-decoration: underline;
}
a.orange:hover {
	color: var(--bgcolor-03);
}
.whiteBtn {
        background: var(--bgcolor-02);
        padding: 15px;
		transition: all 0.3s;
		border-radius: 5px;
}
a.whiteBtn:hover {
        box-shadow: 17px 19px 20px 0 rgba(247, 195, 140, 0.19);
}
.whiteBtn img {
        width: 100%;
        display: block;
        margin: 0 0 10px;
        object-fit: cover;
}
.whiteBtn p {
        width: fit-content;
        margin: 0 auto 10px;
        font-size: 20px;
}
.whiteBtn .arrow::after,
a.whiteBtn:hover .arrow {
        color: var(--thcolor-02);
}
.whiteBtn .boxTtl {
        font-size: 17px;
        align-items: first baseline;
}
.whiteBtn .boxTtl::before {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
}
.whiteBtn .memolist {
        display: grid;
        gap: 10px;
}
@media screen and (max-width: 768px) {
.whiteBtn p {
		font-size: 18px;		
}
.whiteBtn .boxTtl {
	font-size: 16px;
}
}
/*-------------------------------
　　404・送信完了
-------------------------------*/
.simplePage {
		padding: 0 20px;
}
.simplePage .innerCont {
        border-radius: 5px;
        padding: 60px 15px 75px;
        background: var(--bgcolor-05);
}
.simplePage .txtBlock {
        display: grid;
        place-content: center;
        margin: 0 auto 40px;
        max-width: var(--contwide-04);
	line-height: var(--wp--preset--line-height);
}
.simplePage .normalTtl {
	font-size: 2rem;
	margin: auto;
	text-align: center;
	padding: 0 0 35px;
	line-height: var(--line-height01);
}
.simplePage .orangeBtn {
        margin: auto;
}
.sendBox{
	display: grid;
	gap: 25px;
}
@media screen and (max-width: 1080px) {
.simplePage .normalTtl {
	font-size: 23px;		
}
.simplePage .txtBlock {
	    margin: 0 auto 30px;		
}
.simplePage .sendTxt,
.simplePage .txtBlock{
	font-size: 16.5px;
}
}
/*-------------------------------
　　電話
-------------------------------*/
.telBox {
		display: grid;
  		gap: 20px;
}
.telBox .orangeBtn {
	    margin: 15px 0 0;
}
.telFlex {
        display: flex;
        gap: 0 10px;
        padding: 0 0 15px;
		align-items: end;
}
.telFlex span {
        font-size: 20px;
		font-family: var(--ffamiliy-01);
}
.telFlex a {
        font-size: 32px;
}
.telFlex a:hover {
        color: var(--thcolor-02);
}
@media screen and (max-width: 580px) {
.telFlex {
		padding: 0 0 10px;		
}
.telFlex a {
        font-size: 25px;
}
.telFlex span {
        font-size: 15px;
}
.telBox p {
    font-size: 16.5px;
	line-height: 1.8;
}
}
/*-------------------------------
　　基本の投稿ページ
-------------------------------*/
.postArea ul {
	display: grid;
	gap: 10px;
}
.postArea ol,
.numlist {
	display: grid;
	gap: 15px;
	    grid-template-columns: 100%;
}
.postArea ul > li,
.postArea ol > li,
.numlist > li {
	display: flex;
	align-items: center;
	gap: 0 10px;
}
.postArea ul li::before {
	content: '';
	width: 14px;
	height: 14px;
	background: var(--thcolor-01);
	flex-shrink: 0;
}
.postArea ol > li,
.numlist > li {
        counter-increment: cnt;
}
.postArea ol > li::before,
.numlist > li::before {
	content: counter(cnt);
	display: grid;
	place-content: center;
	padding: 7px;
	background: var(--bgcolor-05);
	border-radius: 50px;
	width: 45px;
	height: 45px;
	flex-shrink: 0;
}
.numlist li {
        gap: 30px;
        font-size: 18px;
        align-items: first baseline;
}
.numlist > li::before {
        width: 56px;
        height: 56px;
        font-size: 22px;
}
.numlist li:not(.numlist li:last-of-type) {
        position: relative;
        padding: 0 0 80px;
}
.numlist li:not(:last-child):after {
        content: '';
        position: absolute;
        width: 5px;
        height: 105%;
        top: 0;
        left: 28px;
        background: var(--bgcolor-05);
        z-index: -1;
}
.numlist li .ttl {
        margin: 0 0 10px;
        color: var(--thcolor-02);
        font-weight: 600;
        font-size: 20px;
}
@media screen and (max-width: 580px) {
.numlist > li::before {
        width: 40px;
        height: 40px;
        font-size: 17px;
        flex-shrink: 0;
}
.numlist li:not(.numlist li:last-of-type) {
	    padding: 0 0 55px;
}
.numlist li:not(:last-child):after {
        left: 18px;
}
.numlist li {
		font-size: 16.5px;
        gap: 5px;
}
}