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

section {
font-size: 18px;
font-weight: bold;
line-height: 1.8
}

h2{
font-size:55px;
text-align: center;
margin:0 auto 50px;
padding-top: 100px;
color:#009744;
}

h2 + p{
font-size:20px;
text-align: center;
margin:0 auto 100px;
}

h2 img{
display: block;
margin:0 auto 40px
}

.br_1000{
display: none
}

.br_600{
display: none
}

#h1-wrapper{
background: #009744;
}

#h1-wrapper h1{
width:100%;
max-width: 1020px;
padding: 40px 20px;
color: #fff;
font-size:35px;
margin: 0 auto
}

#merit{
background-repeat:no-repeat;
background-image:url("../img/merit_title_left.jpg"), url("../img/merit_title_right.jpg");
background-position:left top,right top;
padding:0 15px;
}

#merit h2 + p{
padding-bottom: 100px;
}

.merit-outer{
width:100%;
max-width:1400px;
background:#f2f5f3;
border-radius:25px;
margin: 0 auto 150px;
position: relative;
padding: 100px 0;
}

.merit-outer:has(#merit03){
margin: 0 auto 80px;
}

#doutei-link{
height:70px;
}

.merit-outer:before{
content:"";
position:absolute;
top:-100px;
left: 50%;
transform: translate(-50% , 0);
width: 246px;
height: 156px;
background: url("../img/merit01_top.png") no-repeat top center;
}

.merit-outer:has(#merit02):before{
background: url("../img/merit02_top.png") no-repeat top center;
}

.merit-outer:has(#merit03):before{
background: url("../img/merit03_top.png") no-repeat top center;
}

.merit-outer:has(#merit04):before{
background: url("../img/merit04_top.png") no-repeat top center;
}

.merit-outer:has(#merit05):before{
background: url("../img/merit05_top.png") no-repeat top center;
}

.merit-inner{
width: 100%;
max-width:1160px;
padding: 0 15px;
margin: 0 auto;
}

.merit-inner h3{
font-size:45px;
margin:0 auto 70px;
color:#009744;
text-align: center
}

.merit-box{
width: 100%;
max-width: 1020px;
display: flex;
justify-content: space-between;
gap:60px;
margin:0 auto 60px
}

.merit-box.last-merit-box{
margin-bottom: 0
}

.merit-left{
flex: 1
}

.merit-left dl{
margin-top: 10px
}

.merit-left dt{
position: relative;
margin-bottom: 30px;
}

.merit-left dt span{
position: relative;
color:#fff;
background:#009744;
font-size:16px;
border-radius:16px;
padding: 5px 20px;
}

.merit-left dt:before{
position: absolute;
content:"";
background: url("../img/merit_border.png") repeat;
border-radius:16px;
width: 197px;
height: 32px;
left:5px;
top:5px;
}

.merit-right{
background: #fff;
border-radius:25px;
padding:20px 10px;
text-align: center;
width: 522px;
}

.merit-right dt{
font-size:20px;
margin-bottom: 15px
}

.line-y{
font-size:24px;
background: linear-gradient(transparent 50%,rgba(255,255,0,0.6) 0%);
}

.line-s{
background: linear-gradient(transparent 50%, #a3feee 0%);
}

.merit-right dt span.f_24{
font-size:24px;
}

.merit-right dt span.ruby{
position: relative;
}

.merit-right dt span.ruby::before {
position: absolute;
content: "";
width: 5px;
height: 5px;
border-radius: 5px;
background: #333;
top: -7px;
left: calc(50% - 2.5px);
}

.merit-right p{
color:#009744;
max-width: 458px;
margin: 0 auto
}

#merit .flow{
background: url("../img/flow_bg.png") repeat;
border-radius: 25px;
padding: 40px 70px;
width: 100%;
}

#merit .flow ul{
display: flex;
justify-content: space-between
}

#merit .flow li{
position: relative;
font-size: 17px;
width:255px;
}

#merit #merit02 .flow li:last-of-type{
width:373px;
}

#merit .flow li img{
width: 100%;
height: auto
}

#merit .flow li:before{
position: absolute;
content: "";
background: url("../img/flow_arrow.png") no-repeat;
width: 44px;
height: 9px;
top: 140px;
left:-50px;
}

#merit .flow li:first-of-type:before{
display: none
}

#merit03 .merit-box,
#merit05 .merit-box{
align-items: center;
margin-bottom: 0
}

#merit03 .merit-right,
#merit05 .merit-right{
background: none;
padding: 0
}

#merit03 .merit-right img{
display: block;
width: 100%;
height: auto
}

#merit .flow p{
color: #fff;
text-align: center;
margin-bottom: 0
}

#merit02 h3 + p,
#merit04 h3 + p{
text-align: center;
margin-bottom:70px
}

#merit04 .flow h4{
text-align: center;
color:#fff;
font-size:35px;
margin-bottom: 50px
}

#merit #merit04 .flow li:before{
left:-79px;
}

#merit04 .to-uploader{
text-align: center;
margin: 50px auto 0
}

#merit04 .to-uploader p{
font-size:24px;
}

#merit04 .to-uploader a{
display: block;
font-size:24px;
color:#009744;
padding:20px 50px;
background:#fff;
border-radius:10px;
width: 90%;
max-width: 400px;
margin: 15px auto 0;
border:solid 2px #009744;
transition: background .2s ease;
}

#merit04 .to-uploader a:hover{
background:#dff4da;
}

#merit05 .merit-right{
width: 440px;
}

#merit05 .merit-right img{
display: block;
width: 100%;
height: auto;
}

#preview-wrapper{
background:url("../img/preview_bg.jpg") top left repeat-x;
padding-top:50px
}

#preview{
width:100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
counter-reset:preview;
}

#preview h2{ 
padding-top: 0
}

#preview h2 + p{ 
font-size:18px;
}

.preview-detail{
width:100%;
margin-bottom: 70px;
}

.preview-detail h3{
background: url("../img/border_bg.png") repeat;
background-size: 10px;
border-radius:10px;
padding: 30px 20px;
color:#009744;
font-size:40px;
line-height: 1.0;
margin-bottom: 60px;
}

.preview-detail h3 span{
position: relative;
padding-left:80px;
}

.preview-detail h3 span::before {
position: absolute;
left: 0;
top:-5px;
width: 60px;
height: 60px;
border-radius: 30px;
background: #009744;
color: #fff;
counter-increment: preview;
content: "" counter(preview);
font-weight:bold;
text-align: center;
line-height: 1.6;
display: flex;
align-content: center;
justify-content: center;
}

.preview-detail p{
width: 100%;
max-width: 1000px;
margin: 0 auto 20px;
padding: 0 10px
}

.preview-detail img{
display: block;
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto
}

#message-wrapper{
width: 100%;
background-image:url("../img/message_bottom.svg"),url("../img/message_bg_top.jpg");
background-repeat:no-repeat;
background-position:bottom center,bottom 2px center;
background-size:100% auto, cover;
padding-bottom: 200px;
position: relative
}

#message-outer{
background-repeat:no-repeat;
background-image:url("../img/message_bg_left.png"), url("../img/message_bg_right.png");
background-position:left top 200px,right 10px top 15px;
}

#message{
width:100%;
max-width: 660px;
margin: 0 auto;
padding: 0 15px
}

#message p,
#message h2 + p{
font-size:17px;
text-align:left;
margin:0 auto;
}

#message ul{
margin:40px auto;
}

#message li{
list-style: disc inside;
font-size:17px;
color:#009744
}

#message p.sign{
text-align:right;
margin-top: 50px;
}

#message-wrapper .left_bg{
position: absolute;
left:0;
top:100px;
}

#message-wrapper .right_bg{
position: absolute;
right:50px;
top:100px;
}

#join h2{
font-size:45px;
}

#join a{
position: relative;
display: block;
font-size:30px;
color:#fff;
padding:20px 50px;
background:#009744;
border-radius:10px;
width: 90%;
max-width:600px;
transition: background .2s ease;
margin: 100px auto 30px;
text-align: center;
}

#join a:hover{
background:#00813a;
}

#join a:before{
position: absolute;
content:"";
top:-58px;
left:-110px;
width:238px;
height:58px;
background:url("../img/kiageha_baby.png");
}

#join p{
font-size:20px;
text-align: center;
margin:0 auto 100px 
}

@media screen and (max-width:1920px){
#merit{
background-size: calc(100vw * 400 / 1920) auto, calc(100vw * 480 / 1920) auto;
}

#message-outer{
background-size: calc(100vw * 387 / 1920) auto, calc(100vw * 445 / 1920) auto;
background-position:left top calc(100vw * 200 / 1920),right calc(100vw * 10 / 1920) top calc(100vw * 15 / 1920);
}
}

@media screen and (max-width:1200px){
#merit .flow{
border-radius:calc(100vw * 25 / 1200);
padding:calc(100vw * 70 / 1200) ;
}

#merit .flow li{
font-size:calc(100vw * 17 / 1200);
width:calc(100vw * 255 / 1200);
}

#merit #merit02 .flow li:last-of-type{
width:calc(100vw * 373 / 1200);
}

#merit .flow li:before{
background-size: 100% auto;
width:calc(100vw * 44 / 1200);
height:calc(100vw * 9 / 1200);
top:calc(100vw * 140 / 1200);
left:calc(100vw * -50 / 1200);
}

#merit #merit04 .flow li:before{
left:calc(100vw * -79 / 1200);
}

#merit .flow li:first-of-type:before{
display: none
}

#message-outer {
background-size: calc(100vw * 193.5 / 1200) auto, calc(100vw * 222.5 / 1200) auto;
background-position: left bottom calc(100vw * 100 / 1200),right calc(100vw * 10 / 1200) top calc(100vw * 15 / 1200);
}
}

@media screen and (max-width: 1000px) {
section img {
width: auto;
height: auto;
}

h2,
#join h2{
font-size:calc(100vw * 55 / 1000);
margin:0 auto calc(100vw * 50 / 1000);
padding-top:calc(100vw * 100 / 1000);
}

h2 + p{
font-size:16px;
}

h2 img{
margin:0 auto calc(100vw * 40 / 1000);
}

#join h2 img{
margin:0 auto calc(100vw * 100 / 1000);
}

.br_1000{
display: block
}

.merit-inner h3{
font-size:calc(100vw * 45 / 1000);
margin:0 auto calc(100vw * 70 / 1000);
}

.merit-box{
display:block;
margin:0 auto 80px
}

.merit-left dl{
margin-top:0
}

.merit-left dt{
text-align: center;
margin-bottom: 50px
}

.merit-left dt:before{
left:50%;
transform: translate(-50% , 0)
}

.merit-left dd{
text-align: center;
margin-bottom: 50px
}

.merit-right{
width: 100%;
max-width: 700px;
margin: 0 auto
}

#merit03 .merit-right,
#merit05 .merit-right {
width: 90%;
max-width: 500px;
margin: 0 auto
}

.merit-right p{
text-align: left
}

#preview h2 + p {
margin-bottom: calc(100vw * 170 / 1000)
}
}

@media screen and (max-width:820px){
#h1-wrapper h1 {
font-size: 20px;
padding:20px 10px;
}

#merit h2 + p{
padding-bottom:calc(100vw * 30 / 820);
}

.merit-outer {
margin: 0 auto 100px;
position: relative;
padding: 100px 0 calc(100vw * 60 / 820);
}

.merit-outer:has(#merit03){
margin: 0 auto 0;
}

#doutei-link{
height:90px;
}

.merit-outer.merit-outer-last {
margin: 0 auto calc(100vw * 60 / 820);
}

#merit02 h3 + p, #merit04 h3 + p {
font-size:16px;
}

#merit .merit-left p{
font-size:16px;
}

#merit .merit-right p{
font-size:15px;
}

#merit01 .merit-right img{
width: 100%;
max-width: 458px;
}

#merit04 .flow h4 {
font-size:calc(100vw * 35 / 820);
margin-bottom:calc(100vw * 50 / 820);
}

#merit .flow ul{
display:block;
}

#merit .flow li,
#merit .flow li:last-of-type{
font-size:16px;
width:100% !important;
max-width:500px;
margin: 0 auto calc(100vw * 80 / 820);
}

#merit .flow li:before,
#merit #merit04 .flow li::before{
width: calc(100vw * 44 / 820);
height: calc(100vw * 9 / 820);
top: calc(100vw * -50 / 820);
left:50%;
transform: translate(-50%,0) rotate(90deg);
}

#merit .flow li:first-of-type:before{
display: none
}

#merit .flow li:last-of-type {
margin-bottom: 0
}

#preview h2 + p {
font-size: 16px;
margin-bottom: calc(100vw * 100 / 820);
}

.preview-detail h3 {
padding:calc(100vw * 30 / 820) calc(100vw * 20 / 820);
font-size:calc(100vw * 40 / 820);
margin-bottom: 30px;
}
.preview-detail h3 span {
padding-left:calc(100vw * 80 / 820);
}

.preview-detail h3 span::before {
top:calc(100vw * -5 / 820);
width:calc(100vw * 60 / 820);
height:calc(100vw * 60 / 820);
border-radius:calc(100vw * 30 / 820);
}
.preview-detail p {
font-size:15px;
}

#message-wrapper {
padding-bottom:calc(100vw * 100 / 820);
}

#message-outer {
background: none
}

#message p, #message h2 + p {
font-size: 16px;
}

#message li {
font-size: 16px;
}

#join a::before {
 left:0;
}
}

@media screen and (max-width:767px){
#merit02 h3 + p, #merit04 h3 + p {
text-align: left;
margin-bottom: calc(100vw * 70 / 767);
}
}

@media screen and (max-width:600px){
.br_600{
display: block
}

h2 {
font-size: calc(100vw * 40 / 600);
}

#merit {
padding:0 calc(100vw * 20 / 600);
}

#merit > h2 img{
width:calc(100vw * 280 / 600);
height: auto
}

.merit-outer::before {
top: -70px;
left: 50%;
transform: translate(-50% , 0);
width:calc(246px * 0.8);
height:calc(156px * 0.8);
background: url("../img/merit01_top.png") no-repeat top center;
background-size:100% !important 
}

.merit-inner {
padding: 0 calc(100vw * 20 / 600);
}

.merit-inner h3 {
font-size: calc(100vw * 36 / 600);
margin: 0 auto calc(100vw * 50 / 600);
}

#merit .merit-left p {
text-align: left;
}

.merit-right dt{
font-size:calc(100vw * 20 / 600);
margin-bottom: 15px
}

.merit-right dt span.line-y{
font-size:calc(100vw * 24 / 600);
}

.merit-right dt span.f_24{
font-size:calc(100vw * 24 / 600);
}

.merit-right dt span.ruby::before {
width: 3px;
height: 3px;
border-radius: 3px;
top: -3px;
left: calc(50% - 1.5px);
}

#merit02 .br_1000{
display: none
}

#merit04 .br_1000{
display: none
}

#merit04 .flow h4 {
font-size:20px;
margin-bottom:30px;
}

#merit04 .to-uploader p {
font-size:calc(100vw * 24 / 600);
}

#merit04 .to-uploader a{
font-size:calc(100vw * 30 / 600);
padding:calc(100vw * 15 / 600) 0;
}

#preview-wrapper {
padding-top:calc(100vw * 50 / 600);
}

#preview {
padding: 0 calc(100vw * 15 / 600);
}

#preview h2 + p {
text-align: left
}

.preview-detail h3 {
background-size: 7px;
}

#message {
padding: 0 calc(100vw * 15 / 600);
}

#join h2 img {
width: calc(100vw * 250 / 600);
}

#join a{
font-size: calc(100vw * 30 / 600);
padding:calc(100vw * 15 / 600) 0;
margin-bottom:15px;
}

#join p{
font-size: calc(100vw * 24 / 600);
margin: 0 auto calc(100vw * 100 / 600);
}
}