@charset 'utf-8';


main { overflow:hidden; position: relative;  background-repeat: no-repeat; background-size: contain;}
main img {max-width: 100%;}
main:before { content:''; display: block; position: absolute; top:140px; left: 6%; z-index: 2;  width: 200px; height: 150px;  background-repeat: no-repeat; background-position: right top; background-repeat: no-repeat; background-position:  top center; background-size: contain;}
main .header_pc { display: none; position: relative; z-index: 10;}

@media (max-width:1600px){
    main:before { left: -2%;background-size: 150px auto; background-position: right center;}
}

@media (max-width:991px){
    main:before { top: 190px; left: 0; width: 100px;  background-size: 100px auto; }
    #nt_header .header_pc { display: none;}
    main .header_pc { display: block; padding: 20px 0 35px;}
    main .header_pc .header-search { top: 58px;}
}
@media (max-width:768px){
    main:before { top: 170px; left: 0;   }

}
@media (max-width:576px){
    main:before { top: 140px; left: -10px;  width: 80px; background-size: 80px auto;  }
    main .header_pc { display: block; padding: 20px 0 40px;}
}
@media (max-width:480px){
    main:before { top: 135px;  width: 60px; background-size: contain;}
    main .header_pc .header-search { top: 53px;}
}

main article { position: relative; z-index: 2; margin: 0 0 150px;}
main article:last-of-type { margin: 0;}
main article h2 { padding: 0 0 75px; height: 91px; text-align: center; box-sizing:content-box }
main .news { padding: 0 70px; margin:45px 0 40px; }
main .news .wrap { position: relative; padding: 20px 0; margin: 0 auto; width: 100%; max-width: 995px; height: 75px; border: 2px solid #cbc2b8; border-radius: 0 0 30px 0; background: #fff; }
main .news .wrap:after  { content:''; display: block; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 125px; height: 125px; background: url(/img/news/month/10/ico_new.png) no-repeat center / contain; }

main .news .rank  { display: none; width: 100%; text-align: center; }
main .news .rank.slider .slides { padding: 0; }

@media (max-width:991px){
    main article { margin: 0 0 130px;}
    main article h2 { padding: 0 0 70px; height: 80px;}
    main article h2 img { transform:scale(.9)}
    main .news { padding: 0 90px;   margin: 25px 0 30px;}
    main .news .wrap { height: 65px; border-radius: 0 30px 0 0;}
    main .news .wrap:after { width: 110px; height: 110px;}
    main .news .rank  { display: block; }
}
@media (max-width:768px){
    main article { margin: 0 0 110px;}
    main article h2 { padding: 0 0 65px; height: 70px;}
    main article h2 img { transform:scale(.8)}
    main .news { padding: 0 40px; margin: 15px 0 20px;  border-radius: 0 25px 0 0;}
    main .news .wrap {padding: 18px 0;  height: 55px; }
    main .news .wrap:after { width: 100px; height: 100px;}
}
@media (max-width:576px){
    main article { margin: 0 0 90px;}
    main article h2 { padding: 0 0 60px; height: 60px;}
    main article h2 img { transform:scale(.7)}
    main .news { padding: 0 30px; margin: 5px 0;  }
    main .news .wrap { padding: 13px 0; height: 46px; border-radius: 0 25px 0 0;}
    main .news .wrap:after { width: 90px; height: 90px;}
}
@media (max-width:400px){
    main .news { padding: 0 20px; }
    main .news .wrap:after { left: -20px;}
    main .news .wrap:after { width: 80px; height: 80px;}
}



main .visual { padding: 113px 0 0; background: url(/img/news/visual_top.png) no-repeat top  center;}
main .visual .nt-container {max-width: 1508px;}
main .visual .wrap {position: relative; padding: 35px; margin: 0 90px;  border: 2px solid #000; }
main .visual .wrap .vote { position: absolute; right: -9%; bottom: -9%; z-index: 10; padding: 10px; width: 240px; border: 1px solid #555; background: #99d1cf url(/img/news/bg_voit.png) no-repeat right 10px bottom 10px ;}
main .visual .wrap .vote .topic-wrap { padding: 10px; border: 1px solid #555; background: #fff;}
main .visual .wrap .vote .topic-wrap .h2 { position: relative; padding: 17px 0 0 58px;  font-size: 27px; line-height: 1; color: #13a0a0; font-weight: 700; background: url(/img/news/ico_topic.png) no-repeat left bottom / contain;}
main .visual .wrap .vote .topic-wrap .topic { padding: 15px 0 5px; font-size: 21px; line-height: 1.3173; font-weight: 500; color: #000; word-break: keep-all;}
main .visual .wrap .vote .result-wrap { padding: 18px 0 ; margin: 13px 0 0 ; border-left: 1px solid #555;}
main .visual .wrap .vote .result-wrap li { position: relative; height: 30px; margin-bottom: 15px;  font-size: 19px; line-height: 30px; font-weight: 700; color: #fff;  }
main .visual .wrap .vote .result-wrap li:last-of-type { margin-bottom: 0;}
main .visual .wrap .vote .result-wrap li p { position: relative; z-index: 2; padding: 2px 0 0 5px;}
main .visual .wrap .vote .result-wrap li p .percent { display: inline-block; padding: 0 0 0 5px;}
main .visual .wrap .vote .result-wrap li .bar { position: absolute; left: 0; top: 0;   height: 100%;  border-radius: 0 15px 15px 0; background: #2795ff;}
main .visual .wrap .vote .result-wrap li .bar.on { border: 1px solid #555; border-left: 0; }
main .visual .wrap .vote .result-wrap li:nth-of-type(2) .bar {  background: #ff66b5;}
main .visual .wrap:before,
main .visual .wrap:after { content:''; display: block; position: absolute; z-index: 2;}
main .visual .wrap:before { left: -15.8%; bottom: -11%; padding-bottom: 56.7%; width: 44.24%; background: url(/img/news/visual_left.png) no-repeat left bottom / contain;}
main .visual .wrap:after {  right: -17.5%; top: -6.5%; padding-bottom: 57.6%; width: 28.29%; ; background: url(/img/news/visual_right.png) no-repeat right top / contain; }
@media(max-width:1546px){
    main .visual .wrap .vote { right: -8%}
}
@media(max-width:1300px){
    main .visual .wrap .vote { right: -9%}
}
@media (max-width:1199px){
    main .visual { padding: 100px 0 0; background-size: 450px auto;}
    main .visual .wrap .vote { right: -10%}
    /* main .visual .wrap:before { left: -190px; width: 500px;}
    main .visual .wrap:after { right: -163px; top: -4%; width: 250px; } */
}

@media (max-width:991px){
    main .visual { padding: 70px 0 0; background-size: 320px auto; }
    main .visual .wrap { padding: 20px; margin: 0 90px;}
    /*main .visual .wrap:before { left: -16.5%; width: 500px;}*/
    main .visual .wrap:before { left: -16.5%; }
    main .visual .wrap:after {  top: -4%; right: -17.6%; /*width: 250px;*/}
    main .visual .wrap .vote { right: -100px; bottom: -22%; width: 220px; background-size: 65px auto;}
    main .visual .wrap .vote .result-wrap { padding: 10px 0; }
    main .visual .wrap .vote .topic-wrap .h2 { padding: 15px 0 0 58px; font-size: 25px;}
    main .visual .wrap .vote .topic-wrap .topic { font-size: 18px; }
    main .visual .wrap .vote .result-wrap li { margin: 0 0 10px; font-size: 17px;}
}
@media (max-width:768px){
    main .visual { padding: 55px 0 0; background-size: 250px auto;}
    main .visual .wrap { padding: 15px; margin: 0 60px;}
    /*main .visual .wrap:before { width: 400px;}*/
    main .visual .wrap:after { top: -4%; /*width: 230px;*/}
    main .visual .wrap .vote { right: -70px; width: 200px;}
    main .visual .wrap .vote .topic-wrap .h2 { padding: 10px 0 0 45px; font-size: 22px;}
    main .visual .wrap .vote .topic-wrap .topic { padding: 5px 0; font-size: 16px; }
    main .visual .wrap .vote .result-wrap li { font-size: 15px;}
}
@media (max-width:576px){
    main .visual { padding: 45px 0 0; background-size: 220px auto; }
    main .visual .wrap { padding: 15px; margin: 0 40px; border: 1px solid #000;}
    main .visual .wrap:before { left: -22%; width: 34%;}
    main .visual .wrap:after { top: -4%; }
    main .visual .wrap .vote { right: -50px; padding: 10px 8px; width: 180px;}
    main .visual .wrap .vote .topic-wrap { padding: 10px 5px; margin: 10px 0 0;}
    main .visual .wrap .vote .topic-wrap .h2 {font-size: 20px;}
    main .visual .wrap .vote .result-wrap li { height: 22px; line-height: 22px; font-size: 14px;}
}
@media (max-width:480px){
    main .visual { padding: 35px 0 0; background-size: 180px auto; }
    main .visual .wrap { padding: 10px; margin: 0 30px;}
    /*main .visual .wrap:before { width: 100px; }*/
    main .visual .wrap:after { /*width: 80px;*/}
    main .visual .wrap .vote { right: -40px; bottom: -90px; padding: 5px; width: 140px; }
    main .visual .wrap .vote .topic-wrap { margin: 5px 0 0;}
    main .visual .wrap .vote .topic-wrap .h2 { padding: 5px 0 0 32px; font-size: 18px;}
    main .visual .wrap .vote .topic-wrap .topic {  padding: 5px 0 0; font-size: 13px;}
    main .visual .wrap .vote .result-wrap { padding: 5px 0;}
    main .visual .wrap .vote .result-wrap li { margin: 0 0 5px; font-size: 12px;}
}
@media(max-width:400px){
    main .visual .wrap .vote {transform: scale(.8); transform-origin: right; }
}


main .play {  }
main .play .wrap { margin: -6px; }
main .play .wrap .inner { flex:1; padding: 0 6px;  }
main .play .wrap .inner a { display: block; position: relative; padding: 10px 13px; border-radius: 17px; transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);}
main .play .wrap .inner a .box { border: 1px solid #fff; border-radius: 17px ; }
main .play .wrap .inner a .box h3 {  width: 200px; padding: 11px 0; margin: 0 auto; font-size: 22px; font-weight: 700; text-align: center; background: #fff; border-radius: 0 0 15px 15px; }
main .play .wrap .inner a .box .subject { padding: 30px 20px 38px; }
main .play .wrap .inner a .box .subject p { overflow:hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;  height: 3em; font-size: 22px; font-weight: 700; line-height: 1.5; color: #fff; text-align: center; word-break: break-all; text-overflow:ellipsis;  }
main .play .wrap .inner a:after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; border-radius: 17px; transition: 0.4s cubic-bezier(0.33, 1, 0.68, 1); box-shadow: 0 0 5px rgb(0 0 0 / 30%);}
main .play .wrap .inner a:hover {z-index: 2; transform: rotateZ(5deg);}
main .play .wrap .inner:nth-of-type(even) a:hover { transform: rotateZ(-5deg);}
main .play .wrap .inner a:hover:after { box-shadow: -20px 20px 12px 6px rgb(0 0 0 / 20%);}
main .play .wrap .inner:nth-of-type(1) a { background-color: #ff2c28; }
main .play .wrap .inner:nth-of-type(2) a { background-color: #ff8400; }
main .play .wrap .inner:nth-of-type(3) a { background-color: #0089eb; }
main .play .wrap .inner:nth-of-type(4) a { background-color: #00b200; }
main .play .wrap .inner:nth-of-type(1) a h3 { color: #ff2c28; }
main .play .wrap .inner:nth-of-type(2) a h3 { color: #ff8400; }
main .play .wrap .inner:nth-of-type(3) a h3 { color: #0089eb; }
main .play .wrap .inner:nth-of-type(4) a h3 { color: #00b200; }


@media (min-width:992px) and (max-width:1100px){
    main .play .wrap .inner a .box h3 {width: 180px; font-size: 20px; }
    main .play .wrap .inner a .box .subject p { font-size: 20px;}
}
@media (max-width:991px){
    main .play .wrap .inner a .box h3 { width: 80%;}
    main .play .wrap { flex-wrap:wrap; margin: -10px; }
    main .play .wrap .inner { flex:auto; width: 50%; padding: 10px; }
}

@media (max-width:576px){
    main .play .wrap { flex-wrap:wrap; margin: -7px; }
    main .play .wrap .inner {  padding: 7px; }
    main .play .wrap .inner a .box h3 { width: 85%; font-size: 20px; }
    main .play .wrap .inner a .box .subject { padding: 30px 15px 38px; }
    main .play .wrap .inner a .box .subject p { font-size: 20px;}
}
@media (max-width:480px){
    /* main .play .wrap { justify-content: center; margin: 0 0 -20px; }
    main .play .wrap .inner {  padding: 0; margin: 0 0 20px; width: 100%; max-width: 380px; }
    main .play .wrap .inner a .box .subject p { font-size: 18px;}    */
    main .play .wrap { margin: 0 0 -20px;}
    main .play .wrap .inner { flex: inherit; padding: 0; margin: 0 0 20px; width: 49%;}
    main .play .wrap .inner a { padding: 15px 10px; border-radius: 10px }
    main .play .wrap .inner a .box { border-radius: 10px}
    main .play .wrap .inner a .box h3 { font-size: 16px; }
    main .play .wrap .inner a .box .subject { padding: 25px 10px;}
    main .play .wrap .inner a .box .subject p { font-size: 14px; }
}
@media(max-width:420px){
    main .play .wrap .inner { width: 100%;}
    main .play .wrap .inner a { padding: 15px 10px }
}


main .learn .wrap { justify-content: space-between;  margin: -6px;}
main .learn .inner { display: block; flex:1; padding:218px 0 71px ; margin: 0 6px; background-repeat: no-repeat; background-position: top 41px center; border-radius: 50% / 160px ;  border-width: 4px; border-style: solid; }
main .learn .inner:hover { animation:chg_bgp .5s 1 both cubic-bezier(.68,-0.74,.49,.85) }
/* main .learn .inner h3 { padding: 23px 0 21px; margin-bottom: 20px; text-align: center; } */
main .learn .inner h3 { padding: 25px 0; margin-bottom: 20px; font-family: 'CookieRunOTF-Bold'; font-size: 34px; color: #fff; text-align: center; }
main .learn .inner .subject {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; padding: 0 30px; height: 5.92em; font-size: 27px; color: #4b4441; line-height: 1.48em; white-space: normal; text-align: center; }
main .learn .inner:nth-of-type(1) { background-image: url(/img/news/bg_learn1.jpg); background-color: #e5f0f8; border-color: #4297ca;}
main .learn .inner:nth-of-type(2) { background-image: url(/img/news/bg_learn2.jpg); background-color: #ffefd3; border-color: #c97600;}
main .learn .inner:nth-of-type(3) { background-image: url(/img/news/bg_learn3.jpg); background-color: #faeaff; border-color: #b563d2;}
main .learn .inner:nth-of-type(4) { background-image: url(/img/news/bg_learn4.jpg); background-color: #e9f9d6; border-color: #52a700;}
main .learn .inner:nth-of-type(1) h3 { background: #4297ca;}
main .learn .inner:nth-of-type(2) h3 { background: #c97600;}
main .learn .inner:nth-of-type(3) h3 { background: #b563d2;}
main .learn .inner:nth-of-type(4) h3 { background: #52a700;}

@media (max-width:1200px){
    main .learn .wrap { justify-content: space-between;  margin: -3px;}
    main .learn .inner { margin: 0 3px;}
    main .learn .inner h3 { font-size: 28px;}
    main .learn .inner .subject { padding: 0 20px; font-size: 24px;}
}
@media (max-width:991px){
    main .learn .wrap { flex-wrap:wrap; justify-content: center; margin: 0 -20px -20px;}
    main .learn .wrap .inner { flex:auto; margin: 0 20px 20px; width: calc(50% - 40px); max-width: 340px;}
}
@media (max-width:769px){
    main .learn .wrap { flex-wrap:wrap; justify-content: space-between; margin: 0 -10px -20px;}
    main .learn .wrap .inner { flex:auto; margin: 0 10px 20px; width: calc(50% - 20px); max-width: 100%;}
    main .learn .inner .subject { font-size: 22px;}
}
@media (max-width:576px){
    main .learn .wrap { margin: 0 -4px -20px;}
    main .learn .wrap .inner { padding: 190px 0 60px;  margin: 0 5px 20px; width: calc(50% - 10px); background-size: auto 140px; border-radius: 50% / 120px;}
    main .learn .wrap .inner h3 { font-size: 26px; }
    main .learn .wrap .inner .subject { padding: 0 15px; font-size: 20px;}
}
@media(max-width:480px){
    main .learn .wrap .inner { border-width: 2px;  border-radius: 50% / 100px;}
    main .learn .wrap .inner h3 { padding: 20px 0; font-size: 22px; }
    main .learn .wrap .inner .subject { font-size: 16px;}
}
@media(max-width:400px){
    main .learn .wrap .inner { padding: 150px 0 60px;    background-size: auto 100px; border-radius: 50% / 80px;}
    main .learn .wrap .inner h3 { font-size: 17px;}
    main .learn .wrap .inner .subject { font-size: 14px; }
}
/* @media(max-width:400px){
    main .learn .wrap { justify-content: center; margin: 0 0 -20px;}
    main .learn .wrap .inner { margin: 0 0 20px; width: 100%;  max-width: 300px; border-radius: 50% / 140px;}
} */

main .press {}
/*main .press .img .mobile { display: none;}*/
main .press .img {display:block;position:relative;max-height:533px;background: url('/img/news/press_bg.png')no-repeat top center;background-size: contain;}

main .press .move { position: relative; display: block;}
main .press .move:hover .txt { animation:ani_tween 1s 1 ease-out alternate ; }

main .press .move .img01 {width:18.27%;height:auto;}
main .press .move .img02 {position:absolute;top:24%;left:22.27%;width:15%}
main .press .move .img03 {position:absolute;top:24%;left:33.27%;width:9%}
main .press .move .img04 {position:absolute;top:24%;left:37.27%;width:15%}
main .press .move .img05 {position:absolute;top:24%;left:52.27%;width:16%}
main .press .move .img06 {position:absolute;top:24%;left:68.27%;width:13%}
main .press .move .img07 {position:absolute;right:0;width:11.23%;height:auto;}
main .press .move .mission {position:absolute;bottom:18.76%;left:50%;width:31.57%;transform:translate(-50%, 0%);}




@-webkit-keyframes bounceSide {
	0% {
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
	20% {
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
	}
	40% {
    -webkit-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
	}
	60% {
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
}
@keyframes bounceSide {
	0 {
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
	20% {
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
	}
	40% {
    -ms-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
	}
	60% {
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
	}
}
.press .move:hover .bounceSide {
    -webkit-animation: bounceSide 2.5s linear infinite;
    -moz-animation: bounceSide 2.5s linear infinite;
    -ms-animation: bounceSide 2.5s linear infinite;
    -o-animation: bounceSide 2.5s linear infinite;
    animation: bounceSide 2.5s linear infinite;
}

@keyframes bounceUp {
	0% {opacity: 1; transform: translateY(3px);}
	30% {opacity: 1; transform: translateY(0);}
	40% {opacity: 1; transform: translateY(3px);}
	80% {opacity: 1; transform: translateY(-1px);}
	100% {opacity: 1; transform: translateY(3px);}
}
@-webkit-keyframes bounceUp {
	0% {opacity: 1; transform: translateY(3px);}
	30% {opacity: 1; transform: translateY(0);}
	40% {opacity: 1; transform: translateY(3px);}
	80% {opacity: 1; transform: translateY(-1px);}
	100% {opacity: 1; transform: translateY(3px);}
}
.press .move:hover .bounceUp.img02 {
	-webkit-animation: bounceUp 0.5s linear infinite;
	-moz-animation: bounceUp 0.5s linear infinite;
	-ms-animation: bounceUp 0.5s linear infinite;
	-o-animation: bounceUp 0.5s linear infinite;
	animation: bounceUp 0.5s linear infinite;
}
.press .move:hover .bounceUp.img03 {
	-webkit-animation: bounceUp 0.4s linear infinite;
	-moz-animation: bounceUp 0.4s linear infinite;
	-ms-animation: bounceUp 0.4s linear infinite;
	-o-animation: bounceUp 0.4s linear infinite;
	animation: bounceUp 0.4s linear infinite;
}
.press .move:hover .bounceUp.img04 {
	-webkit-animation: bounceUp 0.6s linear infinite;
	-moz-animation: bounceUp 0.6s linear infinite;
	-ms-animation: bounceUp 0.6s linear infinite;
	-o-animation: bounceUp 0.6s linear infinite;
	animation: bounceUp 0.6s linear infinite;
}
.press .move:hover .bounceUp.img05 {
	-webkit-animation: bounceUp 0.8s linear infinite;
	-moz-animation: bounceUp 0.8s linear infinite;
	-ms-animation: bounceUp 0.8s linear infinite;
	-o-animation: bounceUp 0.8s linear infinite;
	animation: bounceUp 0.8s linear infinite;
}
.press .move:hover .bounceUp.img06 {
	-webkit-animation: bounceUp 1s linear infinite;
	-moz-animation: bounceUp 1s linear infinite;
	-ms-animation: bounceUp 1s linear infinite;
	-o-animation: bounceUp 1s linear infinite;
	animation: bounceUp 1s linear infinite;
}

/*main .press .move .txt { position: absolute; left: 16%; top: 25%;  width: 69.6483%; transform-origin: left center;}*/

main .press .wrap { padding: 75px 0 0px;}
main .press .link { }
main .press .link a { display: block; width: 49.46%; transition: .3s;}
main .press .link a img { width: 100%; }
main .press .link a:hover { transform: translate3d(0,-10px,0);}
main .press .wrap.flex { padding: 57px 0 95px;}
main .press .flex {/*flex-wrap:wrap;  padding: 45px 0 0; margin: 0 -6px;*/}
main .press .flex li.inner { position: relative; padding: 0 6px; width: calc(100% / 2); }

@media(max-width:991px){
    main .press .wrap {padding: 70px 0 85px;}
}
@media (max-width:768px){
    /*
	main .press .img .pc { display: none;}
    main .press .img .mobile { display: block; margin: 0 auto;}
	*/
    main .press .wrap {padding: 55px 0 70px;}
}
@media(max-width:576px){
    main .press .wrap {padding: 30px 0 50px;}
}



main .expedition {}
main .expedition .flex {flex-wrap:wrap;  padding: 45px 0 0; margin: 0 -6px;}
main .expedition .flex li.inner { position: relative; padding: 0 6px; width: calc(100% / 4); }
main .expedition .flex li:hover {  animation:ani_jump .5s 1 both cubic-bezier(.68,-0.74,.49,.85)}
main .expedition .flex li.inner h3 {position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 2; margin: 0 auto; padding: 13px 0; width: 78.82%; font-family: 'CookieRunOTF-Bold'; font-size: 27px; line-height: 1.15; letter-spacing: -0.03em; text-align: center; background: #fff; border: 5px solid #000; border-radius: 39px ; }
main .expedition .flex li.inner:nth-of-type(1) h3 { border-color: #caecaf; color: #abdf76;}
main .expedition .flex li.inner:nth-of-type(2) h3 { top: -40px; border-color: #ffb6c5;color: #ffb6c5; }
main .expedition .flex li.inner:nth-of-type(3) h3 { border-color: #b9d3f7; color: #75acf2;}
main .expedition .flex li.inner:nth-of-type(4) h3 { border-color: #d39dff; color: #d39dff;}

@media(max-width:1199px){
    main .expedition .flex li.inner h3 {font-size: 23px;}
}
@media(max-width:991px){
    main .expedition .flex { margin: 0 -6px -30px;}
    main .expedition .flex li.inner { padding: 0 6px 30px; width: 50%; }
    main .expedition .flex li.inner h3 {font-size: 30px;}
}
@media(max-width:768px){
    main .expedition .flex li.inner h3 {font-size: 26px;}
}
@media(max-width:576px){
    main .expedition .flex { padding: 20px 0 0; }
    main .expedition .flex li.inner h3 { padding: 10px 0; font-size: 20px; border-width: 4px; border-radius: 26px;}
}
@media(max-width:480px){
    main .expedition .flex { padding: 40px 0 0; }
    main .expedition .flex li.inner h3 { font-size: 18px;}
    main .expedition .flex li.inner:nth-of-type(2) h3 { top: -33px; }
}
@media(max-width:400px){
    main .expedition .flex { padding: 40px 0 0; margin: 0 -3px -20px; }
    main .expedition .flex li.inner { padding: 0 3px 20px; }
    main .expedition .flex li.inner h3 { width: 85%; font-size: 15px; border-width: 3px; border-radius: 22px;}

}

main .sns {}
main .sns .link {display: flex; justify-content: center; }
main .sns .link li { padding: 0 25px; }
main .sns .customer { display: flex; justify-content: center; padding: 66px 0 0;}
main .sns .customer dt { padding: 0 10px 0 50px; height: 40px; line-height: 40px; background: no-repeat left center; }
main .sns .customer dd { height: 40px; line-height: 40px; }
main .sns .customer dd a { color: #000;}
main .sns .customer dt:nth-of-type(1) { background-image: url(/img/news/ico_email.png);}
main .sns .customer dt:nth-of-type(2) { background-image: url(/img/news/ico_tel.png);}
main .sns .customer dd:first-of-type { padding: 0 50px 0 0;}



@media(max-width:991px){
    main .sns .link img { width: 60px;}
    main .sns .customer { padding: 60px 0 0;}
}

@media(max-width:768px){
    main .sns .link li { padding: 0 20px;}
    main .sns .link li a img { width: 50px;}
    main .sns .customer { padding: 50px 0 0; font-size: 15px;}
    main .sns .customer dt { background-size: 30px ;}
    main .sns .customer dt,
    main .sns .customer dd {height: 30px; line-height: 30px;}
    main .sns .customer dd:first-of-type { padding-right: 30px;}
}
@media(max-width:576px){
    main .sns .customer { padding: 30px 0 0; font-size: 13px;}
    main .sns .customer dt {padding: 0 5px 0 36px;  background-size: 24px ;}
    main .sns .customer dt,
    main .sns .customer dd {height: 24px; line-height: 24px;}
}
@media(max-width:480px){
    main .sns .link li { padding: 0 15px; }
    main .sns .customer { padding: 20px 0 0; }
    main .sns .customer dt {padding: 0 5px 0 0;  background-size: 0 ;}
}
@media(max-width:400px){
    main .sns .link li { padding: 0 10px; }
    main .sns .customer { padding: 10px 0 0; font-size: 11px;}
    main .sns .customer dd:first-of-type { padding-right: 20px;}
}


@keyframes chg_bgp {
    0%,100%{ background-position: top 41px center;}
    50%{ background-position: top 31px center;}
}
@keyframes ani_jump {
    0%,100%{ margin-top:0; margin-bottom: 0;}
    50%{ margin-top:-10px; margin-bottom: 10px;}
}

@keyframes ani_tween {
    0% { transform:translateX(0); }
    20% { transform:translateX(-40%); }
    40% { transform:translateX(-44%); }
    100% { transform:translateX(220%); }
}