@charset "UTF-8";

html { scroll-behavior:smooth; }
body { box-sizing:border-box; font-feature-settings:"palt"; letter-spacing:0.1em; }
.pc { display:block; }
.sp { display:none; }
.sp_nav { display:none; }

/* move */
.scroll_up { transition:0.4s ease-in-out; transform:translateY(30px); opacity:0; }
.scroll_up.on { transform:translateY(0); opacity:1.0; }
.scroll_left { -webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; transition:0.4s ease-in-out; transform:translateX(-30px); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; }
.scroll_left.on { opacity:1.0; filter:alpha(opacity=100); -moz-opacity:1.0; transform:translateX(0); }
.scroll_right { -webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; transition:0.4s ease-in-out; transform:translateX(30px); opacity:0; filter:alpha(opacity=0); -moz-opacity:0; }
.scroll_right.on { opacity:1.0; filter:alpha(opacity=100); -moz-opacity:1.0; transform:translateX(0); }
.timing02 { transition-delay:.1s; }
.fadeIn { animation-name:fadeInAnime; animation-duration:0.6s; animation-delay:0.6s; animation-fill-mode:forwards; opacity:0; }
@keyframes fadeInAnime { from { opacity:0; scale:0.8; transform:translateY(-50px); } to { opacity:1; scale:1; transform:translateY(0); } }





/* gnavi */
.chums_gnavi { position:fixed; width:100%; border-top:solid 15px #0757a0; z-index:100; }
.chums_gnavi h1 { position:absolute; top:10px; left:30px; width:312px; }
.chums_gnavi ul.chums_gnav { margin:0; padding:15px 0; background:#fff; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
.chums_gnavi ul.chums_gnav li { margin:0 30px 0 0; }
.chums_gnavi ul.chums_gnav li a { padding:2px 0 0 0; display:block; }
.chums_gnavi ul.chums_gnav-sns { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
.chums_gnavi ul.chums_gnav-sns li { margin:0 0 0 25px; }
.chums_gnavi ul.chums_gnav-sns li a { padding:0; display:block; }
.chums_gnavi ul.chums_gnav-sns li:first-child { margin:2px 0 0 0; }


/* header */
.chums_header { padding:120px 0; background:#FBE9C4; }
.chums_header .chums_header-logo { margin:0 0 55px; }
.chums_header .chums_concept { margin:0 auto; padding:6px; width:712px; background:linear-gradient(90deg, #0757A0 0%, #0757A0 50%, #C10230 50%, #C10230 100%); border-radius:42px; }
.chums_header .chums_concept .chums_concept-inner { padding:60px 0 290px 0; width:100%; background:#fff url(/_var/chums/img/kv_bg.png) center bottom no-repeat; background-size:contain; border-radius:36px; }
.chums_header .chums_concept .chums_concept-inner p.chums_contxt01 { margin:0 0 20px; font-size:1.8rem; font-weight:bold; line-height:2; }
.chums_header .chums_concept .chums_concept-inner p.chums_contxt02 { margin:0 0 20px; padding:0 0 2px; font-size:1.8rem; font-weight:bold; line-height:2; background:transparent url(/_var/chums/img/wave.png) bottom center no-repeat; display:inline-block; }


/* contents */
h2.chums_ttl { margin:0 auto; width:370px; }
.chums_inner { position:relative; margin:0 auto; width:1000px; text-align:center; }

.chums_products { padding:70px 0; background:#fdfcf8 url() top center no-repeat; }
.chums_products:target { scroll-margin-top:50px; }
.chums_products p.chums_protxt01 { margin:55px 0 18px; font-size:1.8rem; font-weight:bold; line-height:2; }
.chums_products p.chums_protxt02 { margin:0 0 18px; font-size:1.8rem; font-weight:bold; line-height:2; }
.chums_products p.chums_protxt03 { margin:0 0 65px; font-size:1.8rem; font-weight:bold; line-height:2; }
.chums_products ul.chums_pro-lst { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
.chums_products ul.chums_pro-lst li { padding:6px; width:47%; background:linear-gradient(90deg, #0757A0 0%, #0757A0 50%, #C10230 50%, #C10230 100%); border-radius:42px; }
.chums_products ul.chums_pro-lst li a { display:block; }
.chums_products ul.chums_pro-lst li .chums_pro-lstinner { margin:0 auto; padding:30px 10%; width:80%; background:#fff; border-radius:36px; }
.chums_products ul.chums_pro-lst li .chums_pro-lstinner p { padding:10px 0; width:100%; }
.chums_pro-how { position:relative; margin:80px auto 0 auto; width:900px; }
.chums_pro-how .chums_pro-howimg { text-align:center; }
.chums_pro-how ul.chums_pro-howlst { position:absolute; left:0; top:0; width:900px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
.chums_pro-how ul.chums_pro-howlst li { width:260px; color:#0757A0; font-weight:bold; text-align:center; }
.chums_pro-how ul.chums_pro-howlst li:nth-child(odd) { margin:0 190px 35px 0; }
.chums_pro-how ul.chums_pro-howlst li:nth-child(even) { margin:0 0 35px 190px; }

.chums_campaign { padding:70px 0; background:#DCF9FF; }
.chums_campaign:target { scroll-margin-top:50px; }
.chums_campaign h4.chums_camtxt01 { margin:40px 0 20px; color:#0757A0; font-size:3rem; font-weight:bold; line-height:1.4; }
.chums_campaign p.chums_camtxt02 { margin:0 0 15px; font-size:1.8rem; font-weight:bold; line-height:1.8; }
.chums_campaign p.chums_camtxt03 { font-size:1.8rem; font-weight:bold; line-height:1.8; }
.chums_campaign .chums_cam { margin:45px auto 0 auto; width:712px; }

.chums_footer-logo { padding:60px 0 0; text-align:center; }
.chums_footer-logo ul.chums_flogos { position:relative; margin:0 auto; width:260px; height:120px; background:#fff url(/_var/chums/img/f_logo.png) left top no-repeat; }
.chums_footer-logo ul.chums_flogos li:first-child { position:absolute; left:5px; top:22px; width:115px; }
.chums_footer-logo ul.chums_flogos li:last-child { position:absolute; right:3px; top:6px; width:63px; }
.chums_footer-logo .chums_flogo { display:none; }



@media only screen and (max-width: 1100px) {

.sp_nav { display:block; }
.menu-btn { position:fixed; top:20px; right:3%; width:40px; height:40px; cursor:pointer; z-index:101; -webkit-transition:all 2s ease-in-out; transition:all .2s ease-in-out; }
.menu-btn-line { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:2px; width:100%; background:#0757A0; -webkit-transition:all 2s ease-in-out; transition:all.2s ease-in-out; }
.menu-btn-line::before, .menu-btn-line::after { content:""; height:2px; width:100%; background:#0757A0; position:absolute; left:0; -webkit-transition:inherit; transition:inherit; }
.menu-btn-line::before { top:-10px; }
.menu-btn-line::after { top:10px; }
.open .menu { -webkit-transition:all .5s; transition:all .5s; visibility:visible; opacity:1; }
.open .menu-btn { border-color:#0757A0; }
.open .menu-btn-line { background-color:transparent; }
.open .menu-btn-line::before,.open .menu-btn-line::after { top:0; background:#0757A0; }
.open .menu-btn-line::before { -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }
.open .menu-btn-line::after { -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
.menu { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.9); -webkit-transition:all .5s; transition:all .5s; visibility:hidden; opacity:0; z-index:100; }
.menu ul.sp_nav01 { margin:20vh 0 0 0; width:100%; text-align:center; transform:translateY(30%); padding:0; list-style-type:none; }
.menu ul.sp_nav01 li { margin:30px auto; text-align:center; }
.menu ul.sp_nav02 { margin:120px 15vw 0 15vw; width:70vw; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; }
.menu ul.sp_nav02 li { padding:0 15px; width:100%; text-align:center; }
.menu li a { display:block; -webkit-transition:all .2s; transition: all.2s; }


/* gnavi */
.chums_gnavi { position:fixed; width:100%; height:50px; background:#fff; border-top:solid 15px #0757a0; z-index:100; }
.chums_gnavi h1 { position:absolute; top:0; left:2%; width:135px; }
.chums_gnavi ul.chums_gnav { display:none; }
.chums_gnavi ul.chums_gnav-sns { display:none; }

}




@media only screen and (max-width: 700px) {

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


/* header */
.chums_header { padding:80px 5% 40px; }
.chums_header .chums_header-logo { margin:20px 0 40px; padding:0 20%; }
.chums_header .chums_concept { padding:6px; width:calc(100% - 12px); }
.chums_header .chums_concept .chums_concept-inner { padding:40px 8% 160px; width:84%; }
.chums_header .chums_concept .chums_concept-inner p.chums_contxt01 { margin:0 0 20px; font-size:1.6rem; line-height:1.8; }
.chums_header .chums_concept .chums_concept-inner p.chums_contxt02 { margin:0 0 20px; padding:0 0 2px; font-size:1.6rem; line-height:1.8; }


/* contents */
h2.chums_ttl { margin:0 auto; width:80%; max-width:370px; }
.chums_inner { position:relative; width:100%; }

.chums_products { padding:40px 10% 0; width:80%; }
.chums_products p.chums_protxt01 { margin:40px 0 10px; font-size:1.6rem; line-height:1.8; text-align:left; }
.chums_products p.chums_protxt01 br { display:none; }
.chums_products p.chums_protxt02 { margin:0 0 10px; font-size:1.6rem; line-height:1.8; text-align:left; }
.chums_products p.chums_protxt02 br { display:none; }
.chums_products p.chums_protxt03 { margin:0 0 20px; font-size:1.6rem; line-height:1.8; text-align:left; }
.chums_products ul.chums_pro-lst { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
.chums_products ul.chums_pro-lst li { margin:0 0 20px; width:100%; }
.chums_products ul.chums_pro-lst li .chums_pro-lstinner { margin:0 auto; padding:10px 10%; width:80%; }
.chums_products ul.chums_pro-lst li .chums_pro-lstinner p { padding:10px 0; width:100%; }
.chums_pro-how { position:relative; margin:20px auto 0 auto; width:100%; }
.chums_pro-how .chums_pro-howimg { margin:0 10% 40px; width:80%; }
.chums_pro-how ul.chums_pro-howlst { position:static; left:0; top:0; width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; }
.chums_pro-how ul.chums_pro-howlst li { width:100%; }
.chums_pro-how ul.chums_pro-howlst li:nth-child(odd) { margin:0 0 15px 0; }
.chums_pro-how ul.chums_pro-howlst li:nth-child(even) { margin:0 0 15px 0; }
.chums_pro-how ul.chums_pro-howlst li dl { }
.chums_pro-how ul.chums_pro-howlst li dl dt { margin:0; font-size:1.4rem; }
.chums_pro-how ul.chums_pro-howlst li dl dd { }

.chums_campaign { padding:40px 5%; }
.chums_campaign h4.chums_camtxt01 { margin:40px 0 20px; font-size:2rem; line-height:1.4; }
.chums_campaign p.chums_camtxt02 { margin:0 0 10px; font-size:1.6rem; line-height:1.8; }
.chums_campaign p.chums_camtxt03 { font-size:1.6rem; line-height:1.8; }
.chums_campaign .chums_cam { margin:20px auto 0 auto; width:100%; }

.chums_footer-logo { padding:20px 0 0; }
.chums_footer-logo ul.chums_flogos { display:none; }
.chums_footer-logo .chums_flogo { margin:0 25%; width:50%; display:block; }
}