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

/*------------------------------------------------------

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; font-size: 10px; }
body { font-family: "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333; line-height: 1.5; background-color: #fff; overflow: hidden;}
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
/*a:link { color: #000; text-decoration: none; }
a:visited { color: #000; }*/

/*a.fade:hover { text-decoration: none; background-color: #fff; color: #333; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }*/
a.fade:hover ,
a.fade:hover * { text-decoration: none; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

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

.text { font-size: 1.6rem; line-height: 1.8; }
.mincho { font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, YuMincho, HG 明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
main { display: block; }

@media (min-width: 768px) {
	body{ min-width: 1080px; }
	.container { max-width: 1080px; }
    main { margin-bottom: 190px;}
	
	a:hover { text-decoration: underline; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media screen and (min-width:768px) and ( max-width:1080px) {
    .container { width: -webkit-calc(100% - 40px); width: calc(100% - 40px);}
}

@media (max-width: 767px) {
	.container { margin-left: 20px; margin-right: 20px; width: auto; }
    main { margin-bottom: 100px;}
	.pc { display: none; }
	.sp { display: block; }
    
    .text { font-size: 1.6rem; line-height: 1.5; }
}

@media (max-width: 480px) {
	.container { margin-left: 10px; margin-right: 10px; }
}


/*------------------------------------------------------

	flexbox

------------------------------------------------------*/
.colWrap { display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-items: stretch; -webkit-align-items: stretch; align-content: stretch; -webkit-align-content: stretch; }

.col2-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); }
.col3-1 { width: 33.3%; width: -webkit-calc(99.9% / 3 - 10px); width: calc(99.9% / 3 - 10px); }
.col4-1 { width: -webkit-calc( 25% - 10px ); width: calc( 25% - 10px ); }

.colWrap .img { text-align: center;}
.colWrap .img img { width: auto; max-width: 100%; }

.col3L1 ,
.col3R1 { width: 33.3%; width: -webkit-calc(99.9% / 3 - 10px); width: calc(99.9% / 3 - 10px); }
.col3L2 ,
.col3R2 { width: 66.6%; width: -webkit-calc( 99.9% * 0.666 - 10px ); width: calc( 99.9% * 0.666 - 10px ); }


@media (max-width: 767px) {
	
	.col2-1 { width: 100%; }
	.col3-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px);}
	.col4-1 { width: 50%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); }

	.col3L1 ,
	.col3R1 ,
	.col3L2 ,
	.col3R2 { width: 100%; margin-bottom: 15px; }
	
	.col2-1:first-child { margin-bottom: 15px; }
}



/*------------------------------------------------------

    header

------------------------------------------------------*/
header { position: relative; z-index: 1;}
#mainVisual {}
#mainVisual img { width: 100%;}
#mainVisual .title { position: absolute; max-width: 530px; left: 0; right: 0; top: 20%; bottom: auto; margin: auto; text-align: center;}
#mainVisual .title::before { content: ''; width: 200px; height: 90px; background: url("../images/img_main_title_decoration.png") no-repeat left top; background-size: 100% auto; position: absolute; left: 0; right: 0; margin: auto; top: -80px;}
#mainVisual .title img {}

header::before { content: ''; background: url("../images/bg_globalnav.png") no-repeat 0 0; background-size: contain; position: absolute; width: 100%; height: 0; padding-top: 43.333%; left: 0; bottom: -11%;}

header nav {}
header nav ul {}
header nav ul li {}
header nav a {}
header nav img {}

#logo { position: absolute;}
#logo img { width: 100%; max-width: 80px;}


@media (min-width: 768px) {
    header {}
    #mainVisual {}
    #mainVisual img {}
    #mainVisual .title { width: 530px;}
    #mainVisual .title img { padding-top: 30px;}
    
    header nav {}
    header::before {}
    header nav ul.container { max-width: 960px; justify-content: space-around; -webkit-justify-content: space-around;}
    header nav ul li {}
    header nav a {}
    header nav img {}
    
    #logo { top: 50px; left: 80px;}

}

@media (max-width: 767px) {
    header {}
    #mainVisual {}
    #mainVisual img {}
    #mainVisual .title { width: 70%; top: 23%;}
    #mainVisual .title::before { width: 100px; height: 45px; top: -45px;}
    #mainVisual .title img {}
    
    header nav {}
    header nav ul {}
    header nav ul li { width: 25%; text-align: center;}
    header nav a {}
    header nav img { height: 8px;}
    
    #logo { top: 5px; left: 5px;}
    #logo img { max-width: 50px;}
}



/*------------------------------------------------------



------------------------------------------------------*/
#spNavBtn { position: absolute; display: block; top: 0; right: 0px; width: 50px; height: 50px; z-index: 10; background-color: #a560a2; padding-top: 12px; }
#spNavBtn span { display: block; background-color: #fff; width: 80%; height: 4px; margin-left: auto; margin-right: auto; margin-bottom: 7px;}
#spNavBtn span:nth-child(2) {}
#spNavBtn span:nth-child(3) {}

#spNav { background-color: #fff; position: absolute; width: 100%; z-index: 1; left: 0; top: 0; padding-top: 50px; -moz-transform: translateY(-240px); -webkit-transform: translateY(-240px); -o-transform: translateY(-240px); -ms-transform: translateY(-240px); -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); }
#spNav ul {  border-top: 1px solid #a560a2; }
#spNav ul li { width: 100%;}
#spNav ul li:not(:last-child) { border-bottom: 1px solid #a560a2;}
#spNav ul li a { display: block; height: 100%; padding: 15px 10px;}
#spNav img { height: 16px;}

#spNav.open { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); }

@media (min-width: 768px) {
    #spNavBtn { display: none;}
    #spNavBtn span {}
    
    #spNav { display: none;}
    #spNav ul {}
    #spNav ul li {}
    #spNav ul li a {}
    #spNav img {}
}

@media (max-width: 767px) {
    #spNavBtn {}
    #spNavBtn span {}
    
    #spNav {}
    #spNav ul {}
    #spNav ul li {}
    #spNav ul li a {}
    #spNav img {}
}



/*------------------------------------------------------

    cnt1

------------------------------------------------------*/
#cnt1 { background-color: #afdce5; position: relative;}
#cnt1::before { content: ''; position: absolute; background: url(../images/bg_cnt1.png) no-repeat 0 0; background-size: contain; bottom: -5%; width: 100%; height: 0; padding-top: 47.5%; }
#cnt1::after { content: ''; background: url("../images/img_cnt1_1.png") no-repeat 0 0 ; background-size: 100% auto; width: 112px; height: 175px; position: absolute; right: 0; top: 0; right: 140px; top: 95px;}
#cnt1 .container {}
#cnt1 .title { text-align: center;}
#cnt1 .title img { max-width: 420px; width: 100%;}
#cnt1 .title + .text { text-align: center;}

#cnt1 .img { position: relative;}
#cnt1 .img div:first-child {}
#cnt1 .img div:first-child img {}
#cnt1 .img div:last-child { position: absolute;}
#cnt1 .img div:last-child img {}


@media (min-width: 768px) {
    #cnt1 { padding-top: 12%; padding-bottom: 140px; }
    #cnt1 .title { margin-bottom: 40px;}
    #cnt1 .title + .text { font-size: 1.8rem; margin-bottom: 70px;}
    
    #cnt1 .img { width: 900px; margin-left: auto; margin-right: auto;}
    #cnt1 .img div:last-child { top: -50px; right: 4%;}
}

@media (max-width: 767px) {
    #cnt1 { padding-top: 12%; padding-bottom: 40px;}
    #cnt1::after { z-index: 0; right: 10%; top: 12%;}
    #cnt1 .container { z-index: 1; position: relative;}
    #cnt1 .title { margin-bottom: 20px;}
    #cnt1 .title img { width: 80%; }
    #cnt1 .title + .text { margin-bottom: 30px;}
    
    #cnt1 .img div:last-child { top: -30px; right: 0; width: 40%; }
}




/*------------------------------------------------------

    cnt2

------------------------------------------------------*/
#cnt2 { position: relative;}
#cnt2::before { content: ''; position: absolute; width: 120%; height: 300px; background-color: #afdce5; left: -10%; top: -180px; border-radius: 50%; z-index: -1;}
#cnt2 h2.title { text-align: center;}
#cnt2 h2.title img {}
#cnt2 h2.title + .text { text-align: center;}

#cnt2 ul {}
#cnt2 ul li { position: relative;}
#cnt2 ul li .title { margin-bottom: 10px;}
#cnt2 ul li .title img {}
#cnt2 ul li .text { padding-left: 40px; font-weight: bold;}
#cnt2 ul li .img {}
#cnt2 ul li .img img {}

#cnt2 ul li:first-child .img img { max-width: 436px;}
#cnt2 ul li:nth-child(2) .img img { max-width: 432px;}
#cnt2 ul li:nth-child(3) .img img { max-width: 394px;}
#cnt2 ul li:nth-child(4) .img img { max-width: 394px; }
#cnt2 ul li:last-child .img img { max-width: 428px;}


@media (min-width: 768px) {
    #cnt2 { padding-top: 20px;}
    #cnt2 .container { max-width: 980px; }
    #cnt2 h2.title { margin-bottom: 40px;}
    #cnt2 h2.title + .text { font-size: 1.8rem; margin-bottom: 100px;}
    
    #cnt2 ul li { width: 50%; max-width: 430px; margin-bottom: 120px;}
    #cnt2 ul li .text { font-size: 1.4rem; margin-bottom: 20px;}


    #cnt2 ul li:nth-child(3) .text ,
    #cnt2 ul li:nth-child(4) .text { margin-bottom: 0;}
    #cnt2 ul li:nth-child(3) .img ,
    #cnt2 ul li:nth-child(4) .img { margin-bottom: 20px;}
    #cnt2 ul li:nth-child(2) .img { text-align: right;}
    #cnt2 ul li:nth-child(2) .text { margin-bottom: 40px;}

    #cnt2 ul li:nth-child(even) { top: 270px; position: relative;}
    
    #cnt2 ul li:nth-child(2) { max-width: 480px;}
    #cnt2 ul li:nth-child(3) { margin-bottom: 160px;}
    
    #cnt2 ul li:nth-child(2)::before { content: url("../images/bg_cnt2_1.png"); position: absolute;}
    #cnt2 ul li:nth-child(3)::before { content: url("../images/bg_cnt2_2.png"); position: absolute;}
    #cnt2 ul li:nth-child(4)::before { content: url("../images/bg_cnt2_3.png"); position: absolute;}
    #cnt2 ul li:last-child::before { content: url("../images/bg_cnt2_4.png"); position: absolute;}
    
    #cnt2 ul li:nth-child(2)::before { top: -300px; left: -270px; }
    #cnt2 ul li:nth-child(3)::before { top: -188px; right: -115px; }
    #cnt2 ul li:nth-child(4)::before { top: -145px; left: -120px; }
    #cnt2 ul li:last-child::before { top: -150px; left: 25px; }
    
    #cnt2 ul li:last-child .title { padding-left: 80px;}
    #cnt2 ul li:last-child .text { padding-left: 0;}
}

@media (max-width: 767px) {
    #cnt2 { margin-bottom: 50px;}
    #cnt2::before { width: 150vw; height: 100px; left: -25vw; top: -50px; }
    #cnt2 h2.title { margin-bottom: 20px;}
    #cnt2 h2.title + .text { margin-bottom: 40px;}
    
    #cnt2 ul { width: 90%; margin-left: auto; margin-right: auto;}
    #cnt2 ul li { width: 100%;}
    #cnt2 ul li:not(:last-child) { margin-bottom: 140px;}
    #cnt2 ul li .text { margin-bottom: 10px;}
    #cnt2 ul li .img img { width: 100%;}
    
    #cnt2 ul li:nth-child(3) .img ,
    #cnt2 ul li:nth-child(4) .img { margin-bottom: 15px;}
    
    
    #cnt2 ul li:nth-child(2)::before ,
    #cnt2 ul li:nth-child(3)::before ,
    #cnt2 ul li:nth-child(4)::before ,
    #cnt2 ul li:last-child::before { position: absolute; bottom: auto; top: -136px; left: 0; right: 0; margin: auto; width: 260px; height: 134px; }

    #cnt2 ul li:nth-child(2)::before { content: url("../images/sp/bg_cnt2_1_sp.png"); }
    #cnt2 ul li:nth-child(3)::before { content: url("../images/sp/bg_cnt2_2_sp.png"); }
    #cnt2 ul li:nth-child(4)::before { content: url("../images/sp/bg_cnt2_3_sp.png"); }
    #cnt2 ul li:last-child::before { content: url("../images/sp/bg_cnt2_4_sp.png"); }


}


/*------------------------------------------------------

    cnt3

------------------------------------------------------*/
#cnt3 { background-color: #afdce5; position: relative;}
#cnt3::after { content: ''; position: absolute; width: 100%; height: 0px; background: url("../images/bg_cnt3.png") no-repeat 0 0; background-size: contain; padding-top: 13.33%;}
#cnt3 .container {}
#cnt3 .title {}
#cnt3 .title img { max-width: 620px; width: 100%;}
#cnt3 ul {}
#cnt3 ul li {}
#cnt3 ul li img { width: 100%; max-width: 350px;}

@media (min-width: 768px) {
    #cnt3 { padding: 40px 0 15%; }
    #cnt3 .title { text-align: left; margin-bottom: 20px;}
    #cnt3 ul li { width: 33%; max-width: 350px;}
}

@media (max-width: 767px) {
    #cnt3 { padding: 30px 0 15%;}
    #cnt3 ul li { width: 100%; text-align: center;}
    #cnt3 ul li:not(:last-child) { margin-bottom: 30px;}
}


/*------------------------------------------------------

    cnt4

------------------------------------------------------*/
#cnt4 { position: relative;}
#cnt4::before { content: ''; position: absolute; width: 120%; height: 300px; background-color: #afdce5; left: -10%; top: -200px; border-radius: 50%; z-index: -1; }
#cnt4::after { content: ''; position: absolute; width: 100%; height: 0px; padding-top: 16.666%; background: url(../images/bg_cnt4.png) no-repeat 0 0; background-size: contain; left: 0; bottom: 0;}
#cnt4 .container {}
#cnt4 .container > .title { text-align: center;}
#cnt4 .container > .title img { width: 100%; max-width: 660px;}
#cnt4 .container > .title + .text {}

#bus1 {}
#bus1 .left {}
#bus1 figure {}
#bus1 .left img { width: 100%; max-width: 474px;}
#bus1 .right {}
#bus1 .title {}
#bus1 .title img {}
#bus1 .text { font-weight: bold;} 

#bus2 { text-align: center;}
#bus2 dt { margin-bottom: 10px;}
#bus2 dt img {}
#bus2 dd {}
#bus2 dd img {}

#bus3 {}
#bus3 li {}
#bus3 li a {}
#bus3 img {}

#busspotIndex { background-color: #d3effb; position: relative; padding: 30px 0 30px; margin-bottom: 100px;}
#busspotIndex::after { content: ''; position: absolute; width: 100%; border-top: 50px solid #d3effb; border-left: 50vw solid #fff; border-right: 50vw solid #fff; left: 0; bottom: -50px;}
#busspotIndex ul {}
#busspotIndex ul li {}
#busspotIndex .img {}
#busspotIndex .img img { width: 100%; max-width: 332px;}
#busspotIndex p {}
#busspotIndex p img {}

.busspotInner { margin-bottom: 50px;}
.busspotInner .container {}
.busspotInner .left {}
.busspotInner figure {}
.busspotInner .left img { width: 100%; max-width: 450px;}
.busspotInner .right {}
.busspotInner .right > .title { margin-bottom: 15px;}
.busspotInner .right > .title img {}
.busspotInner .lead { color: #17a0c7; font-size: 1.6rem; margin-bottom: 10px;}
.busspotInner .btnWrap { text-align: right; margin-bottom: 20px;}
.busspotInner .btnWrap a {}
.busspotInner .btnWrap img {}
.busspotInner .access { border-top: 2px solid #59c2e1;}
.busspotInner .access .title { margin-bottom: 5px;}
.busspotInner .access .title img {}
.busspotInner .access .text { font-weight: bold; font-size: 1.4rem;}
.busspotInner .access .text span { color: #ff4f6d;}
.busspotInner:nth-of-type(2) { background-color: #d3effb; padding: 30px 0;}
.busspotInner:nth-of-type(2) .left img { width: 100%; max-width: 458px;}


@media (min-width: 768px) {
    #cnt4 { padding-bottom: 20%;}
    #cnt4 .container > .title { margin-bottom: 40px;}
    #cnt4 .container > .title + .text { text-align: center; font-size: 1.8rem; margin-bottom: 70px;}

    #bus1 { align-items: flex-end; -webkit-align-items: flex-end; margin-bottom: 75px; }
    #bus1 .left { width: 50%;}
    #bus1 .right { width: 50%;}
    #bus1 .title { margin-bottom: 14px;}
    #bus1 .text { margin-bottom: 30px; font-size: 1.4rem;}

    #bus2 { margin-bottom: 32px;}

    #bus3 { max-width: 1050px; margin-left: auto; margin-right: auto; margin-bottom: 35px;}
    
    #busspotIndex ul li { width: 332px;}
    #busspotIndex .img { margin-bottom: 12px; }
    #busspotIndex p { text-align: right;}
    
    .busspotInner .left { width: 50%;}
    .busspotInner .right { width: 50%;}
    .busspotInner .access { padding-top: 25px;}
}

@media (max-width: 767px) {
    #cnt4 { padding-bottom: 20%;}
    #cnt4::before { width: 150vw; height: 100px; left: -25vw; top: -50px;  }
    
    #cnt4 .container > .title { margin-bottom: 20px;}
    #cnt4 .container > .title + .text { margin-bottom: 30px;}

    #bus1 { margin-bottom: 40px;}
    #bus1 .left { margin-bottom: 15px;}
    #bus1 .title { margin-bottom: 10px;}

    #bus2 { margin-bottom: 20px;}

    #bus3 { margin-bottom: 20px;}
    #bus3 li { width: 100%;}
    #bus3 li:not(:last-child) { margin-bottom: 8px;}
    
    #busspotIndex ul li { width: 100%;}
    #busspotIndex ul li:not(:last-child) { margin-bottom: 20px;}
    #busspotIndex .img { margin-bottom: 8px; }
    #busspotIndex p { text-align: center;}
    
    .busspotInner .left { width: 100%; text-align: center; margin-bottom: 20px;}
    .busspotInner .right { width: 100%;}
    .busspotInner .access { padding-top: 20px;}
    .busspotInner .access .title { margin-bottom: 10px;}
}




/*------------------------------------------------------

    cnt5

------------------------------------------------------*/
#cnt5 { position: relative; overflow: hidden;}
#cnt5::before { content: ''; position: absolute; width: 120%; height: 300px; background-color: #afdce5; left: -10%; top: -200px; border-radius: 50%; z-index: -1; }
#cnt5 .container {}
#cnt5 .container > .title { text-align: center;}
#cnt5 .container > .title img { width: 100%; max-width: 660px;}
#cnt5 .mainvisual { text-align: center; position: relative; top: -100px; z-index: -2;}
#cnt5 .mainvisual img { width: 100%; max-width: 948px;}
#cnt5 .mainvisual .text { position: absolute; left: 0; bottom: 0; text-align: left; z-index: 1;}
#cnt5 .mainvisual .text::before { content: ''; position: absolute; background: url("../images/bg_cnt5.png") no-repeat center center; z-index: -1; width: 523px; height: 248px; left: -80px; top: -75px;}
#cnt5 .trainInner {}
#cnt5 .trainInner .body {}
#cnt5 .trainInner .body .title { margin-bottom: 10px;}
#cnt5 .trainInner .body .title img {}
#cnt5 .trainInner .body .text { font-weight: bold; font-size: 1.4rem; margin-bottom: 10px;}
#cnt5 .trainInner .body .img {}
#cnt5 .trainInner .body .img img {}
#cnt5 .trainInner > .img {}
#cnt5 .trainInner > .img img { width: 100%; max-width: 396px;}
#cnt5 .trainInner h4.title {}
#cnt5 .trainInner h4.title img {}
#cnt5 .trainInner ul {}
#cnt5 .trainInner ul li {}
#cnt5 .trainInner ul li:first-child { margin-bottom: 7px;}
#cnt5 .trainInner ul li a {}
#cnt5 .trainInner ul li img{}

#cnt5 .trainInner .body .img.colWrap {}
#cnt5 .trainInner .body .img.colWrap .left {}
#cnt5 .trainInner .body .img.colWrap .right {}


@media (min-width: 768px) {

    #cnt5 .mainvisual { max-width: 948px; margin-left: auto; margin-right: auto;}
    #cnt5 .mainvisual .text { font-size: 1.8rem; left: 60px; bottom: 60px;}
    #cnt5 .trainInner { max-width: 880px; margin-left: auto; margin-right: auto;}
    #cnt5 .trainInner .body { width: 50%;}
    #cnt5 .trainInner .body .text { margin-bottom: 25px;}
    #cnt5 .trainInner > .img { width: 50%; text-align: left;}
    
    #cnt5 .trainInner .body .img.colWrap { position: relative; margin-bottom: 140px;}
    #cnt5 .trainInner .body .img.colWrap .left { position: absolute; left: -60px; top: 55px;}
    #cnt5 .trainInner .body .img.colWrap .right { text-align: right; width: 100%;}
    
    #cnt5 .trainInner:nth-of-type(1) { margin-bottom: 70px;}
    #cnt5 .trainInner:nth-of-type(1) .body .text { padding-left: 30px;}
    #cnt5 .trainInner:nth-of-type(2) .body { padding-left: 60px;}
    #cnt5 .trainInner:nth-of-type(2) .body .text { padding-left: 70px;}
    #cnt5 .trainInner:nth-of-type(3) { margin-bottom: 30px;}
    #cnt5 .trainInner:nth-of-type(3) .body .text { padding-left: 40px;}
    #cnt5 .trainInner:nth-of-type(3) .body { position: relative; top: -70px;}
    #cnt5 .trainInner:nth-of-type(4) .img { text-align: right;}
    #cnt5 .trainInner:nth-of-type(4) .body { padding-left: 60px;}
    
    #cnt5 .trainInner:nth-of-type(odd) > .img { text-align: right; }
}

@media (max-width: 767px) {

    #cnt5::before { width: 150vw; height: 100px; left: -25vw; top: -50px; }
    #cnt5 .mainvisual { top: -50px;}
    #cnt5 .mainvisual .text { padding: 5px; font-size: 1.4rem;}
    #cnt5 .mainvisual .text::before { left: -100px; top: -60px; }
    #cnt5 .trainInner .body { width: 100%; margin-bottom: 15px;}
    #cnt5 .trainInner > .img { width: 100%;}
    
    #cnt5 .trainInner .body .img.colWrap .left { width: 100%;}
    #cnt5 .trainInner .body .img.colWrap .right { width: 100%;}
    
    #cnt5 .trainInner:nth-of-type(2) ,
    #cnt5 .trainInner:nth-of-type(4) { flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}
    #cnt5 .trainInner:not(:last-of-type) { margin-bottom: 40px;}
}



/*------------------------------------------------------

    footer

------------------------------------------------------*/
footer { background: url("../images/bg_footer.png") no-repeat center bottom #d3effb; background-size: 100% auto; }
footer .container {}
footer .container::before { content: url("../images/img_footer.png"); position: absolute; left: 0; top: 0; top: -60px;}
footer .text { text-align: center; position: relative;}
footer .text::before { content: ''; background: url("../images/img_main_title_decoration.png") no-repeat 0 0; position: absolute; width: 200px; height: 90px; background-size: 100% auto; left: 0; right: 0; top: -110px; margin: auto; }
footer .text img { width: 100%; max-width: 620px;}
#copy { text-align: center; font-size: 1.2rem; padding: 10px;}

@media (min-width: 768px) {
    footer .container { padding-top: 160px;}
    footer .text { margin-bottom: 310px;}

}

@media (max-width: 767px) {
    footer .container { padding-top: 120px;}
    footer .text { margin-bottom: 30%; width: 90%; margin-left: auto; margin-right: auto;}
    footer .text::before { width: 100px; height: 45px; top: -55px; }

}


/*------------------------------------------------------

	return top

------------------------------------------------------*/
#pageTop { position: fixed; z-index: 10; right: 0; bottom: 200px; width: 80px; height: 80px; font-size: 1.8rem; letter-spacing: 4px; text-align: center; background-color: #a560a2; }
#pageTop a { padding-top: 25px; display: block; color: #fff; height: 100%; }
#pageTop span { display: inline-block; padding: 0 5px 10px; border-bottom: 1px solid #fff; }

@media(max-width: 480px){
    #pageTop { bottom: 100px; width: 60px; height: 60px; font-size: 1.6rem; }
    #pageTop a { padding-top: 15px;}
    #pageTop a span { padding: 0;}
}

/*------------------------------------------------------



------------------------------------------------------*/


@media (min-width: 768px) {

}

@media (max-width: 767px) {

}