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

/*----------------------------------------------------------
wrap
----------------------------------------------------------*/
#wrap{
background: url("../images/common_bg_01.jpg");
}
.article .container{
padding: 40px 0 80px;
}
.contents{
width: 900px;
margin: 0 auto;
}
@media (max-width: 768px){
.article .container{
padding: 1.5rem 0 3.0rem;
}
.contents{
width: 100%;
}
}

/*----------------------------------------------------------
MV
----------------------------------------------------------*/
.mainVisual01{
background: #fec446;
border-bottom: 5px solid #4c2e1c;
margin: 0 0 80px;
padding: 110px 0 125px;
position: relative;
}
.mainVisual01::before{
content: "";
width: 100%;
height: 100px;
background: url("../images/index/mv_bg_01_pc.png") repeat-x;
background-size: auto 100%;
background-position: left top;
position: absolute;
left: 0;
top: 0;
}
.mainVisual01::after{
content: "";
width: 100%;
height: 100px;
background: url("../images/index/mv_bg_02_pc.png") repeat-x;
background-size: auto 100%;
background-position: left top;
position: absolute;
left: 0;
bottom: 12px;
}
.mainVisual01 .mvInner{
background: #fff;
text-align: center;
border-top: 5px solid #4c2e1c;
border-bottom: 5px solid #4c2e1c;
padding: 70px 0 60px;
}
.mainVisual01 .mvInner .title{
width: 460px;
margin: 0 auto 40px;
}
.mainVisual01 .mvInner .text{
color: #3f1b06;
font-size: 2.0rem;
line-height: 2.2;
}
@media (max-width: 768px){
.mainVisual01{
border-bottom: 0.3rem solid #4c2e1c;
margin: 0 0 3.0rem;
padding: 8.5rem 0 9.0rem;
}
.mainVisual01::before{
height: 8.0rem;
background: url("../images/index/mv_bg_01_sp.png") repeat-x;
background-size: auto 100%;
background-position: left top;
}
.mainVisual01::after{
height: 8.0rem;
background: url("../images/index/mv_bg_02_sp.png") repeat-x;
background-size: auto 100%;
background-position: left top;
bottom: 0.5rem;
}
.mainVisual01 .mvInner{
border: 0.3rem solid #4c2e1c;
margin: 0 0.5rem;
padding: 3.5rem 0 2.5rem;
}
.mainVisual01 .mvInner .title{
width: 24.8rem;
margin: 0 auto 2.5rem;
}
.mainVisual01 .mvInner .text{
font-size: 1.6rem;
line-height: 1.8;
}
}

.mainVisual02{
background: url("../images/index/sec02_bg_01_pc.png") no-repeat;
background-size: cover;
background-position: bottom center;
padding: 10px 0 0;
}
.mainVisual02 .title{
width: 1440px;
margin: 0 auto;
}
@media (max-width: 768px){
.mainVisual02{
background: none;
padding: 0;
}
.mainVisual02 .title{
width: 100%;
margin: 0;
}
}

/*----------------------------------------------------------
title
----------------------------------------------------------*/
.mvTitle{
margin: 0 auto 80px;
}
@media (max-width: 768px){
.mvTitle{
margin: 0 auto 4.0rem;
}
}

.titleTypeA01{
font-size: 3.0rem;
font-weight: bold;
text-align: center;
letter-spacing: 2px;
border-bottom: 3px double #181818;
margin: 0 0 40px;
padding: 0 0 5px;
}
.block + .titleTypeA01{
margin-top: 80px;
}
@media (max-width: 768px){
.titleTypeA01{
font-size: 2.4rem;
margin: 0 0 2.5rem;
padding: 0;
}
.block + .titleTypeA01{
margin-top: 6.0rem;
}
}

.titleTypeB01{
width: 560px;
margin: 0 auto 40px;
}
@media (max-width: 768px){
.titleTypeB01{
width: 100%;
margin: 0 auto 2.5rem;
}
}

.titleTypeC01{
font-weight: bold;
text-align: center;
margin: 0 0 30px;
}
.titleTypeC01 span{
background: url("../images/common_line_02.png") no-repeat;
background-size: auto 16px;
background-position: bottom center;
font-size: 2.2rem;
padding: 0 60px 25px;
display: inline-block;
}
@media (max-width: 768px){
.titleTypeC01{
margin: 0 1.5rem 1.5rem;
}
.titleTypeC01 span{
background: url("../images/common_line_02.png") no-repeat;
background-size: auto 1.1rem;
background-position: bottom center;
font-size: 1.4rem;
padding: 0 0 2.0rem;
display: block;
}
}

/*----------------------------------------------------------
block
----------------------------------------------------------*/
.blockTypeA01 .block + .block{
margin-top: 40px;
}
.blockTypeA01 .block.type02{
margin-top: 20px;
}
.blockTypeA01 .text{
font-size: 1.6rem;
line-height: 2.0;
}
.blockTypeA01 .text b{
background: linear-gradient(transparent 70%, #ffda8a 70%);
font-weight: bold;
border-bottom: 2px solid #ffcd61;
}
.blockTypeA01 .text .br{
display: block;
}
.blockTypeA01 .text .br + .br{
margin-top: 20px;
}
.blockTypeA01 .image{
width: 340px;
}
.blockTypeA01 .img_l > .image{
margin: 0 20px 10px 0;
float: left;
}
.blockTypeA01 .img_r > .image{
margin: 0 0 10px 15px;
float: right;
}
@media (max-width: 768px){
.blockTypeA01{
margin: 0 1.5rem;
}
.blockTypeA01 .block{
display: flex;
flex-wrap: wrap;
}
.blockTypeA01 .block + .block{
margin-top: 2.0rem;
}
.blockTypeA01 .block.type02{
margin-top: 2.0rem;
}
.blockTypeA01 .text{
width: 100%;
font-size: 1.6rem;
line-height: 2.0;
display: block;
order: 1;
}
.blockTypeA01 .text .br + .br{
margin-top: 1.5rem;
}
.blockTypeA01 .image{
width: 100%;
}
.blockTypeA01 .img_l > .image,
.blockTypeA01 .img_r > .image{
margin: 2.0rem 0 0;
float: none;
order: 2;
}
.blockTypeA01 .img_l > .image.oder01,
.blockTypeA01 .img_r > .image.oder01{
margin: 0 0 2.0rem;
float: none;
order: 1;
}
}

.blockTypeB01{
background: url("../images/common_line_01.png"), url("../images/common_line_01.png");
background-size: 100% auto, 100% auto;
background-position: top center, bottom center;
background-repeat: no-repeat, no-repeat;
margin: 80px 0;
padding: 80px 0;
}
.blockTypeB01 .block .text{
font-size: 1.6rem;
line-height: 2.0;
}
.blockTypeB01 .block .text + .text{
margin-top: 20px;
}
.blockTypeB01 .block .text b{
background: linear-gradient(transparent 70%, #ffda8a 70%);
font-weight: bold;
border-bottom: 2px solid #ffcd61;
}
@media (max-width: 768px){
.blockTypeB01{
background: url("../images/common_line_01.png"), url("../images/common_line_01.png");
background-size: auto 1.1rem, auto 1.1rem;
background-position: top center, bottom center;
background-repeat: no-repeat, no-repeat;
margin: 4.0rem 1.5rem;
padding: 5.5rem 0;
}
.blockTypeB01 .block .text + .text{
margin-top: 1.5rem;
}
}

.blockTypeC01 .courseBlock + .courseBlock{
border-top: 2px dashed #c9bb9d;
margin-top: 50px;
padding-top: 50px;
}
.blockTypeC01 .block01{
margin: 0 0 25px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.blockTypeC01 .block01 .title{
width: 460px;
margin: 0 20px 0 0;
}
.blockTypeC01 .block01 .box{
width: 420px;
background: #fffbf1;
text-align: center;
border-radius: 10px;
overflow: hidden;
}
.blockTypeC01 .block01 .box .ttl{
background: #6a5d42;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
padding: 10px 0 8px;
}
.blockTypeC01 .block01 .box .list{
display: inline-block;
text-align: left;
}
.blockTypeC01 .block01 .box .list > li{
font-size: 1.8rem;
padding: 15px 0 13px;
position: relative;
}
.blockTypeC01 .block01 .box .list > li::before{
content: "";
width: 300%;
height: 1px;
background: #eee1c2;
position: absolute;
left: -50%;
bottom: 0;
}
.blockTypeC01 .block01 .box .list > li:last-child::before{
display: none;
}
.blockTypeC01 .block02 .text{
font-size: 1.6rem;
line-height: 2.0;
margin: 0 0 25px;
}
.blockTypeC01 .block02 .btn{
text-align: center;
}
.blockTypeC01 .block02 .btn a{
background: #ff9600;
color: #fff;
font-size: 2.2rem;
font-weight: bold;
border-radius: 100px;
padding: 15px 120px 12px;
display: inline-block;
position: relative;
}
.blockTypeC01 .block02 .btn a::before{
content: "";
width: 14px;
height: 18px;
background: #fff;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -9px;
}
@media (max-width: 768px){
.blockTypeC01 .courseBlock + .courseBlock{
border-top: none;
margin-top: 8.0rem;
padding-top: 0;
}
.blockTypeC01 .block01{
margin: 0 0 2.0rem;
display: block;
}
.blockTypeC01 .block01 .title{
width: 100%;
margin: 0 0 2.0rem;
}
.blockTypeC01 .block01 .box{
width: auto;
border-radius: 1.0rem;
margin: 0 1.5rem;
}
.blockTypeC01 .block01 .box .ttl{
font-size: 1.6rem;
padding: 0.7rem 0 0.5rem;
}
.blockTypeC01 .block01 .box .list > li{
font-size: 1.6rem;
padding: 1.2rem 0 1.0rem;
}
.blockTypeC01 .block02{
margin: 0 1.5rem;
}
.blockTypeC01 .block02 .text{
font-size: 1.4rem;
margin: 0 0 2.0rem;
}
.blockTypeC01 .block02 .btn a{
font-size: 2.0rem;
padding: 1.2rem 0 1.0rem;
display: block;
}
.blockTypeC01 .block02 .btn a::before{
width: 1.0rem;
height: 1.5rem;
right: 2.0rem;
margin-top: -0.75rem;
}
}


/*----------------------------------------------------------
index section
----------------------------------------------------------*/
.section01{
width: 900px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.section01 .block{
width: 430px;
background: #fff;
border: 4px solid #4c2e1c;
-moz-box-shadow: 7px 7px 0px 0px rgba(76, 46, 28, 1);
-webkit-box-shadow: 7px 7px 0px 0px rgba(76, 46, 28, 1);
-ms-box-shadow: 7px 7px 0px 0px rgba(76, 46, 28, 1);
box-shadow: 7px 7px 0px 0px rgba(76, 46, 28, 1);
margin: 0 0 40px;
padding: 15px 15px 20px;
}
@media (min-width: 769px){
.section01 .block:nth-last-child(-n+2){
margin-bottom: 0;
}
}
.section01 .block .image{
border: 4px solid #4c2e1c;
margin: 0 0 10px;
}
.section01 .block .subTtl{
background: #4c2e1c;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
text-align: center;
line-height: 1.0;
margin: 0 0 15px;
padding: 10px 0 8px;
}
.section01 .block .title{
font-size: 2.0rem;
font-weight: bold;
text-align: center;
line-height: 1.8;
border-bottom: 4px solid #4c2e1c;
margin: 0 0 15px;
padding: 0 0 12px;
}
.section01 .block .text{
height: 95px;
font-size: 1.6rem;
margin: 0 20px 20px;
position: relative;
overflow: hidden;
}
.section01 .block .text::before{
content: "";
width: 100%;
height: 60px;
background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1.0));
position: absolute;
left: 0;
bottom: 0;
}
.section01 .block .btn{
margin: 0 20px;
}
.section01 .block .btn a{
background: #fec446;
color: #4c2e1c;
font-size: 2.0rem;
font-weight: bold;
text-align: center;
border: 4px solid  #4c2e1c;
border-radius: 100px;
padding: 10px 0 8px;
display: block;
position: relative;
}
.section01 .block .btn a::before{
content: "";
width: 14px;
height: 16px;
background: #4c2e1c;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -8px;
}
@media (max-width: 768px){
.section01{
width: auto;
margin: 0 1.5rem 6.0rem;
display: block;
}
.section01 .block{
width: 100%;
border: 0.3rem solid #4c2e1c;
-moz-box-shadow: 0.7rem 0.7rem 0px 0px rgba(76, 46, 28, 1);
-webkit-box-shadow: 0.7rem 0.7rem 0px 0px rgba(76, 46, 28, 1);
-ms-box-shadow: 0.7rem 0.7rem 0px 0px rgba(76, 46, 28, 1);
box-shadow: 0.7rem 0.7rem 0px 0px rgba(76, 46, 28, 1);
margin: 0 0 3.0rem;
padding: 1.0rem 1.0rem 2.0rem;
}
.section01 .block .image{
border: 0.3rem solid #4c2e1c;
margin: 0 0 1.0rem;
}
.section01 .block .subTtl{
font-size: 1.4rem;
margin: 0 0 1.2rem;
padding: 0.8rem 0 0.5rem;
}
.section01 .block .title{
font-size: 1.8rem;
line-height: 1.6;
border-bottom: 0.3rem solid #4c2e1c;
margin: 0 0 1.5rem;
padding: 0 0 1.0rem;
}
.section01 .block .text{
height: 9.0rem;
font-size: 1.4rem;
margin: 0 1.0rem 2.0rem;
}
.section01 .block .text::before{
height: 6.0rem;
}
.section01 .block .btn{
margin: 0 1.0rem;
}
.section01 .block .btn a{
font-size: 2.0rem;
border: 0.3rem solid  #4c2e1c;
padding: 0.5rem 0 0.3rem;
}
.section01 .block .btn a::before{
width: 1.4rem;
height: 1.4rem;
right: 2.0rem;
margin-top: -0.8rem;
}
}

.section02 > .lead{
width: 737px;
margin: 0 auto 30px;
padding: 0 0 50px;
position: relative;
}
.section02 > .lead::before{
content: "";
width: 120px;
height: 25px;
background: #4c2e1c;
clip-path: polygon(50% 100%, 0 0, 100% 0);
position: absolute;
left: 50%;
bottom: 0;
margin-left: -60px;
}
.section02 > .lead span{
color: #4c2e1c;
font-size: 2.4rem;
font-weight: bold;
text-align: center;
margin: 15px 0 0;
display: block;
}
.section02 .block01 .box01{
background: url("../images/index/sec02_bg_01.jpg");
padding: 100px 0 80px;
position: relative;
}
.section02 .block01 .box01::before{
content: "";
width: 100%;
height: 25px;
background: url("../images/index/sec02_ico_01.png") repeat-x;
background-size: auto 100%;
position: absolute;
left: 0;
top: 0;
}
.section02 .block01 .box01 .inner{
width: 900px;
margin: 0 auto;
}
.section02 .block01 .box01 .inner .ttl{
width: 620px;
margin: 0 auto 40px;
}
.section02 .block01 .box01 .inner .text{
color: #fff;
font-size: 2.0rem;
font-weight: bold;
text-align: center;
line-height: 2.0;
}
.section02 .block01 .box01 .inner .text + .text{
margin-top: 20px;
}
.section02 .block01 .box01 .inner .btn{
text-align: center;
margin: 60px auto 0;
}
.section02 .block01 .box01 .inner .btn a{
background: #fff;
border-bottom: 6px solid #f15a24;
padding: 10px;
display: inline-block;
}
.section02 .block01 .box01 .inner .btn a span{
color: #f15a24;
font-size: 2.6rem;
font-weight: bold;
line-height: 1.0;
border: 2px solid #f15a24;
padding: 20px 120px;
display: block;
position: relative;
}
.section02 .block01 .box01 .inner .btn a span::before{
content: "";
width: 14px;
height: 16px;
background: #f15a24;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 20px;
top: 50%;
margin-top: -8px;
}
@media (max-width: 768px){
.section02 > .lead{
width: 100%;
margin: 0 auto 1.5rem;
padding: 0;
}
.section02 > .lead::before{
display: none;
}
.section02 > .lead span{
font-size: 1.6rem;
margin: 1.0rem 0 0;
}
.section02 .block01 .box01{
background-size: 10.1rem 14.0rem;
padding: 6.0rem 0 4.0rem;
}
.section02 .block01 .box01::before{
height: 2.0rem;
}
.section02 .block01 .box01 .inner{
width: auto;
margin: 0 1.5rem;
}
.section02 .block01 .box01 .inner .ttl{
width: 100%;
margin: 0 auto 2.5rem;
}
.section02 .block01 .box01 .inner .text{
font-size: 1.6rem;
}
.section02 .block01 .box01 .inner .text + .text{
margin-top: 2.0rem;
}
.section02 .block01 .box01 .inner .btn{
margin: 3.0rem auto 0;
}
.section02 .block01 .box01 .inner .btn a{
border-bottom: 0.5rem solid #f15a24;
padding: 0.5rem;
display: block;
}
.section02 .block01 .box01 .inner .btn a span{
font-size: 2.0rem;
border: 0.2rem solid #f15a24;
padding: 1.5rem 0;
}
.section02 .block01 .box01 .inner .btn a span::before{
width: 1.4rem;
height: 1.4rem;
right: 2.0rem;
margin-top: -0.8rem;
}
}