@charset "utf-8";
/* CSS Document */

/*--------------------------------------
基本設定
----------------------------------------*/
img {
width: 100%;
height: auto;
}

* {font-feature-settings: "palt" 1;}
body{
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 600;
font-style: normal;
}

b, strong, .bold{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
}

/* IE11だけに適応 */
_:lang(x)::-ms-backdrop, .selector {
	font-family: "Segoe UI", "メイリオ", Meiryo, sans-serif;
}

.wrapper {
width: 95%;
margin: auto;
max-width: 1024px;
}


.pc {display: block;}
.sp {display: none;}

@media screen and (max-width: 490px){
.pc {display: none;}
.sp {display: block;}
}
/*--------------------------------------
header
----------------------------------------*/
h1 {
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 1.6em;
position: relative;
margin: 50px auto 30px;
letter-spacing: 0.1em;
}

h1:after {
 transform: scale(-1, 1);
 right: -20px;;
 left: auto;
}

header {
background:linear-gradient(0deg,#faf6d2 0%,#faf6d2 30%,#67bcc1 30%,#67bcc1 100%);
margin-bottom: 0;
position: relative;
color: #FFF;
font-weight: bold;
background: url(../img/head.png) no-repeat;
background-size: cover;
background-position: top, center;
}

header * {font-weight: bold;}

.header-contents-area {
max-width: 800px;
margin:auto;
padding: 10px 20px 80px;
box-sizing: border-box;
}

.circle-list {
display: flex;
justify-content: space-around;
max-width: 500px;
margin:auto;
}
.circle-list li {
width: 30%;
max-width: 180px;
}

.explain {
font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
font-weight: 600;
line-height: 1.8em;
text-align: center;
font-size: 14px;
padding-top: 20px;
letter-spacing: 0.15em;
}
.head-img {
width: 90%;
max-width:1000px;
margin: 0 auto;
pointer-events: none;
}

.head-img-txt{
width: 400px;
margin: 20px auto 0;
}

@media screen and (max-width: 768px){
h1 {
font-size: 4vw;
}
}

@media screen and (max-width: 490px){
h1 {position: static; font-size: 20px; width: 100%; font-weight: bold;}
.explain { text-align:left; width: 90%; margin: auto;}
.explain br {display: none;}
}
/*--------------------------------------
goal
----------------------------------------*/
.goal {
width: 90%;
max-width: 700px;
margin: 0px auto;
padding-top: 80px;
padding-bottom: 80px;
pointer-events:none;
}

@media screen and (max-width: 490px){
.goal {
padding: 30px 0;
}
}
/*--------------------------------------
コンテンツ
----------------------------------------*/

.content-area {
background:#faf6d2;
}

.box {
display: flex;
align-items: center;
justify-content: space-between;
color: #d66980;
font-size: 20px;
width: 95%;
max-width: 700px;
margin: 0px auto;
line-height: 1.4em;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
border-bottom: 2px dotted #DDD;
padding: 30px 0;
letter-spacing: 0;
font-feature-settings: "palt" 1;
}

.box.last {
border-bottom: none;
}

.step-num {width: calc(14.5% - 20px); margin-right: 20px;}
.step-text-box {width: 57%;}
.step-title {
font-size: 1.4em;
margin-bottom: 13px;
font-weight: bold;
}

.step-text {font-weight: 700;}
.illust-box {
width: 28%;
}

.step-list {margin-top: 8px;}
.step-list li {
position: relative;
padding-left: 10px;
font-size: 0.8em;
font-weight: 700;
line-height: 1.2em;
}

.step-list li:before{
position: absolute;
content: "・";
left: 0px;
top: 0;
right: auto;
}


.step-attention {font-size: 0.7em;}

.arrows {
width: 60px;
margin: auto;}

@media screen and (max-width: 768px){
.box {font-size: 18px;}
.step-title {font-size: 1.2em;}
}

@media screen and (max-width: 490px){
.box {
font-size: 15px;
text-align: justify;
}
.step-num { width: calc(22% - 10px); margin-right: 10px;}
.step-text-box {width: 50%;}
.illust-box {width: 25%; padding-top: 30px;}
.step-title {margin-bottom: 8px;}

.seiyaku .step-num {width:0;}
.seiyaku .step-text-box {width:65%;margin-right: 2%;}
.seiyaku .step-title {font-size: 1.8em;margin-bottom: 15px;}

}



/*--------------------------------------
注意書き
----------------------------------------*/
.attention-area {
font-size: 14px;
text-align: left;
max-width: 700px;
width: 90%;
margin: 0px auto 50px;
padding:50px 0;
border-top: 2px dotted #DDD;
border-bottom: 2px dotted #DDD;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
font-weight: normal;
line-height: 1.8em;
}


.attention-list li {
position: relative;
padding-left: 10px;
}

.attention-list li:before{
position: absolute;
content: "・";
left: 0px;
top: 0;
right: auto;
}

/*--------------------------------------
ロゴ
----------------------------------------*/
footer {
text-align: center;
line-height: 1.6em;
}

.tel {
max-width: 500px;
margin: auto;
width: 90%;}

.logo {
width: 280px;
margin: 30px auto 0;
}


.bg-yellow {
background:#faf6d2;
padding-bottom: 80px;
}