@charset "utf-8";
/*----*/
:root{
	--font-size:15px;
	--max-width:1500px;
	--color: #474747;
	--color2:#a1a1a1;
	--color-a: #ff7777;
	--background: #fff;
	--gradation:linear-gradient(#ffbcb4,#ffdac3);
	--gradation-right:linear-gradient(to right,#ffd79c,hsl(0, 100%, 83%));
	--gradation-right-hover:linear-gradient(to right,#ffa6a6,#ffd79c);
}

@media screen and (max-width: 768px){
	:root{
    --font-size:12px;
  }
}
/*----*/
/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

li{list-style: none;}
/*-----------
body
-----------*/
body{color: var(--color);background: var(--background); font-size: var(--font-size); width: 100%; line-height: 1.8; overflow-x: hidden;font-family: 'Noto Sans JP', sans-serif; font-weight: 400;}
img{height: auto;}

@media screen and (max-width: 800px){
	body{width: 100%;}
	img{width: 100%;}
}

@media screen and (max-width: 768px){
	/* body{font-size: 20px;} */
}

/*-----------
commone
-----------*/
a{color: var(--color-a);text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}
.spacer {width: 100%; display: block;}

/*SP-on*/
.pc{display: none;}
.sp{display: block;}


/*orangerouge commne*/
h3{font-size: 2.5em;}
h3 span{font-weight: 300; font-size: .5em; margin-left: .5em;}


.window{width: .8em; height: .8em; border: 1px solid var(--color); position: relative;}
.window::after{content: ""; width: .8em; height: .8em; position: absolute; border: 1px solid var(--color); border-width: 0 1px 1px 0; top: 1px; left: 1px;}


.btn{display: block; background: #ff7777;color: #fff; border-radius: 200px; padding: .8em 2em .8em 1em; text-align: center; position: relative;}
.btn.grd{background: var(--gradation-right);}
.btn.icon .window{position: absolute; right: 1.5em; top: calc(50% - .4em); border-color: #fff;}

.btn::after{content: ""; display: block; width: .5em; height: .5em; position: absolute; top: calc(50% - .25em); right: 1.5em; border: 1px solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg);transition: all 0.2s linear;}
.btn.down::after{transform: rotate(135deg);}
.btn.icon .window::after{border-color: #fff;}
.btn:hover::after{right: 1em;/* top:calc(50% - 1em); */transition: all 0.2s linear;}
.btn.down:hover::after{right: 1.5em;top:50%; transition: all 0.2s linear;}
.btn.icon::after{display: none;}
.btn:hover{text-decoration: none;}
.btn.grd:hover{background: var(--gradation-right-hover);}


/*-----------
Header
-----------*/
header{position: absolute; top: 0; left: 0; width: 100%;padding: 20px calc(75px + 1em) 20px 20px; z-index: 20;}
header .inner{justify-content: flex-end; align-items: center; position: relative;}
header .inner .logo_or{display: none;}
header .social li{ width:40px; margin-left: 1em;line-height: 1;}

.btn_official{min-width: 300px;}
.language_btn{position: relative; margin-left: 1em;}
.language_btn a.btn{display: block; background: #ffc26b; border: 2px solid #ffc26b; min-width: 200px; position: relative; z-index: 2;}
.language_menu {position: absolute;z-index: 1; top: 30px; left: 0; width: 100%;background: #ffc26b;-webkit-transition: .2s ease;transition: .2s ease;visibility: hidden;opacity: 0; border-radius:50px; border-radius: 0 0 50px 50px; padding:50px 0 25px 0;border: 2px solid #ffc26b; overflow: hidden; box-sizing: border-box;}
.language_menu li{padding: .5em 1em; text-align: center;}
.language_menu li a{color: #fff;}
.language_btn a.btn:hover:after{top: calc(50% - .25em);right: 1.5em;}
.language_btn:hover .language_menu{visibility: visible;opacity: 1;  background: #ffc26b;border: 1px solid #ffc26b; -webkit-transition: ease .2s;transition: ease .2s;}

.btn_nav {position: fixed; display: block; width: 50px; height: 50px;margin-left: 1em; z-index: 1000; top: 20px; right: 20px;}
.btn_nav:hover{cursor: pointer;}
.btn_nav span{position: absolute; background: #000; width: 60%; height: 2px; display: block; right: 0; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
.btn_nav span::after,
.btn_nav span::before{content: ""; position: absolute; right: 0; height: 2px; background: #000; display: block;}
.btn_nav span::after{width: 60%; top: -15px;-webkit-transition: .2s ease;transition: .2s ease;}
.btn_nav span::before{width: 50px; bottom: -15px;-webkit-transition: .2s ease;transition: .2s ease;}
.btn_nav.active span::after{transform: rotate(45deg);width: 30px; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
.btn_nav.active span::before{transform: rotate(-45deg); width: 30px; bottom: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
.btn_nav.active span{background:transparent;-webkit-transition: .2s ease;transition: .2s ease;}

/*SP NAV*/
#nav{position:fixed;z-index: 999;top:0;right: -120%;width:46%;height: 100vh;background:#fff;transition: all 0.3s;}
#nav.panelactive{right: 0;}
#nav.panelactive #nav-list{position: fixed;z-index: 999; width: 100%;height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;}

#nav .nav_list { position: absolute;z-index: 999;top:50%;left:0;transform: translate(0,-50%);}

#nav .nav_list > li{padding: 1em 0 0 100px;font-size: 1.5em;font-weight: 600;}
#nav .nav_list > li.small{font-size: 1.2em;}
#nav .nav_list > li a{color: var(--color);text-decoration: none;display: block;}
#nav .nav_list_lg li{padding: 0 .5em;}
#nav .nav_list_lg li a{margin-top: 0;}
#nav .nav_list_lg li.avtive a{text-decoration: underline;}

#nav .nav_list_social{align-items: center;}
#nav .nav_list_social a{width: 40px; line-height: 1; margin-left: .5em;}

@media screen and (max-width: 1200px){
  header .social{display: none;}
  .btn_official {min-width: 250px;}
}

@media screen and (max-width: 960px){
	header .btn_official,header .language_btn{display: none;}

  #nav{width: 100%; background: rgba(255,255,255,.8);}
}

@media screen and (max-width: 768px){
  header {position: fixed;}
  header .inner.flex{justify-content: space-between;}
  header .inner .logo_or{display: block;width: 50px; filter: drop-shadow(0 0 10px #fff); z-index: 1000;}
}

/*-----------
MV
-----------*/
#mv{position: relative;}
#mv .mv_img{width: 54%;}
#mv .text_area{width:46%; padding: calc(92px + 8%) 0 0;}
#mv .logo_or{width: 20%; display: block; margin: 0 auto; max-width: 200px; min-width: 100px;}

#mv h1,#mv p{width: 100%; margin: 0 auto; text-align: center;}
#mv h1{margin-top: .5em; font-size: 1.8em; font-weight: 600;}
#mv .text_area h1 br{display: none;}
#mv p{line-height: 2; margin-top: 1em;}

/*about orange*/
.btn_about {width: 70%; max-width: 300px; margin: 2em auto 0;}

@media screen and (max-width: 1200px){
  #mv .text_area{padding: calc(95px + 2em) 2em 0;}
  #mv .text_area h1 br{display: block;}
  #mv .text_area p{text-align: left;}
  #mv .text_area p br.wd{display: none;}
}

@media screen and (max-width: 960px){
	#mv .text_area{padding-top: 60px;}
  #mv .text_area h1{font-size: 1.5em; margin-top: .25em;}

  /*about orange*/
  .btn_about {width: 90%; margin-top: 1em;}
}

@media screen and (max-width: 768px){
  #mv.flex{flex-direction:column;}
	#mv .mv_img,#mv .text_area{width: 100%;}
	#mv .text_area{padding-top: 2em;}
  #mv .text_area h1 br{display: none;}
  #mv .text_area p{text-align: center;}
  #mv .text_area p br.wd{display: block;}
}


/*news area*/
.news {border-radius: 30px; background: #fff; border: 1px solid var(--color2); padding:2.5em; width: 80%; margin: 80px auto 0;position: relative;}
.news.n_sp{display: none;}
.news h5{color: var(--color2); font-weight: 400; font-size: 1.2em;}
.news li{list-style: disc; margin: 1em .5em .5em 1em;}
.news li a{text-decoration: underline; position: relative; padding:0 .5em 0 0;transition: all 0.2s linear;}
.news li a span::after{content: ""; display: block; width: .25em; height: .25em; border: 1px solid var(--color-a); border-width: 1px 1px 0 0; transform: rotate(45deg); position: absolute; top: calc(50% - .125em); right: -.25em;}
.news li a:hover{text-decoration: none; padding-right: 1em; transition: all 0.2s linear;}
.news li a.nolink{text-decoration: none; color:var(--color);}
.news li a.nolink::after{display: none;}

@media screen and (max-width: 1200px){
	.news{position: absolute; bottom: -15%; left: 2.5%; width: 95%;}
}

@media screen and (max-width: 960px){
	.news{position: absolute; bottom: -30%;}
}

@media screen and (max-width: 768px){
  #mv p{font-size: 1.2em;}
  .news{position: relative; bottom: auto; left: auto; margin-top: 2em;}
}

/*-----------
profile
-----------*/
#profile{margin-top: -15%; font-size: 20px;}

.bg_orange{background: url(../images/bg_orange.png) no-repeat; background-position: top right; background-size: 100% auto; padding-top: 20%;}
.bg_rouge{padding: 10em 0; background: url(../images/bg_rouge.png) no-repeat; background-position: top right; background-size: 100% auto; margin-top: -10%;}

#profile h2{max-width: 328px; width: 50%; margin: 0 auto;}
#profile p.lead{width: fit-content;margin: 2em auto 0;  font-size: .8em;}

#profile .inner{max-width: var(--max-width); width: 95%; margin: 0 auto; position: relative;}
#profile .text_area{width: 48%;/*600px*/ position: relative; padding-bottom: 1.5em;}
#profile .orange .text{padding: 0 1em; margin-top: -1em;}
#profile .text p{font-weight: 300; line-height: 2;}

#profile .orange{margin-top: 5%;}
#profile .orange .text_area{margin-top: 25%;}
#profile .orange h4{width:100%; line-height: 0; }
#profile .orange .text{padding: 0 1em; margin-top: -1em;}
#profile .orange .text p{font-weight: 300; line-height: 2;}
#profile .orange .img_ornage{margin-left: -12%; width: 53%;}

#profile .rouge{margin-top: 10%;}
#profile .rouge .text_area{margin-top: 8%;}
#profile .rouge h4{width:90%; line-height: 0;}

#profile .text_area::after{content: ""; position: absolute; bottom: -37px; left: 0; width: 100%; height: 37px; }
#profile .orange .text_area::after{background: url(../images/line_prf-l.png) no-repeat; display: block; background-position: top center; background-size: 100% auto;}
#profile .rouge .text_area::after{background: url(../images/line_prf-r.png) no-repeat; display: block; background-position: top center; background-size: 100% auto;}

#profile .rouge .img_rouge{ width: 84%;}
#profile .rouge .text_area{margin-left: -29%;}
#profile .rouge .text{padding: 0 1em; margin-top: -1em;}

@media screen and (max-width: 1200px){
	#profile{margin-top: 0; font-size: 18px;}
	.bg_orange{padding-top: 15%;}
	#profile p.lead{font-size: 1em;}
	#profile .text_area{font-size: 16px;}
	#profile .orange{margin-top: 10%;}
	#profile .orange .img_ornage{width: 53%; margin-left: -5%;}

  .bg_rouge{padding: 13em 0 8em;}

  #profile .rouge{margin-top: 5%;}
}

@media screen and (max-width: 960px){
	.bg_orange{padding-top: 20%; margin-top: 10%;}
}

@media screen and (max-width: 768px){
  #profile{font-size:var(--font-size);}
	.bg_orange{padding-top: 20%; margin-top: -10%;}
  #profile h2{ width: 30%;}
  #profile h3{ font-size: 2.2em;}
  #profile p.lead{margin-top: 0;}

  #profile .text_area{width: 53%; font-size: 14px;}

  #profile .rouge .text_area{margin-top: -5%;}
}

@media screen and (max-width: 600px){
  .bg_orange,.bg_rouge{background-size: 150% auto; padding-bottom: 3em;}
  .bg_rouge{background-position: left top; margin-top: 0;padding-top: 10em;}

  #profile .text_area{width: 100%; font-size: 14px;}

  #profile .orange.inner{flex-direction: column-reverse;}
  #profile .rouge.inner{flex-direction: column;}

  #profile .orange .text_area,
  #profile .rouge .text_area{margin-top: 0;}
  #profile .rouge .text_area{margin-left: 0;}
  #profile .orange .text_area::after,
  #profile .rouge .text_area::after{display: none;}

  #profile .orange h4,
  #profile .rouge h4{display: none;}
  #profile .orange .text p br{display: none;}
  #profile .orange .text p br.bd{display: block;}
  #profile .orange .img_ornage{display: block; margin: 0 auto; width: 70%;}
  #profile .rouge .img_rouge{display: block; margin: 0 0 0 2%; width: 100%;}

}
/*-----------
illustrator
-----------*/
#illustrator{position: relative; z-index: 10; margin-top: -100px; }
#illustrator h2{line-height: 0; width: 50%; margin: 0 auto;}
#illustrator .wrap{background: var(--gradation); padding: 5em 0;}
#illustrator .inner{ max-width: var(--max-width); width: 95%;margin: 0 auto;    align-items: center;}
#illustrator .img_illprf{line-height: 1; border-radius: 50%; overflow: hidden; width: 350px; margin-right: 65px;}
#illustrator .text-area{width:calc(100% - 415px);}

@media screen and (max-width: 1200px){
  #illustrator .img_illprf{margin-right: 2em;}
}

@media screen and (max-width: 768px){
  #illustrator .wrap{padding: 2.5em 0;}
  #illustrator .img_illprf{max-width:200px; width: 50%; margin: 0 auto; }
  #illustrator .inner{flex-direction: column;}
  #illustrator .text_area{margin: 1em auto 0; width: 90%;}
}


@media screen and (max-width: 600px){
  #illustrator h2{width: 80%;}
}

/*-----------
special
-----------*/
#specia {padding: 10em 0 5em;}
#specia h2{width: 50%; max-width: 355px; margin: 0 auto;}
#specia p.lead{width: fit-content;margin: 0 auto; text-align: center;}
#specia h5{font-size: 1em; font-weight: 400; color: var(--color2);}
#specia h4{font-size: 1.5em;}
#specia .box{max-width: var(--max-width); width: 95%; margin: 8em auto 0;}
#specia .box:first-of-type{margin-top: 5em;}
#specia .box figure{width: 37%;}
#specia .box .text_area{width: calc(63% - 50px); margin-left:50px;}
#specia .box .text_area p{width: 100%; margin-top: 1em;}
#specia .box .text_area dt{margin-top: 1.5em; font-weight: 500;}
#specia .box .text_area .btn{margin-top: 1.5em; max-width: 400px;}
#specia hr {max-width: var(--max-width);margin: 8em auto 0; width: 95%; border: 1px solid #cbcbcb; border-width: 1px 0 0 0;}

@media screen and (max-width: 768px){
  #specia .box.flex{flex-direction: column-reverse; margin-top: 2em;}
  #specia .box figure{width: 80%; margin: 1em auto 0;}
  #specia .box .text_area{width: 100%; margin-left:0;}
  #specia hr{margin-top: 5em;}
}


/*-----------
about
-----------*/
#about{border: 1px solid var(--color2); border-radius: 30px; padding: 3em; max-width: 1600px; width: 95%; margin: 8em auto 0;}
#about h4{max-width: 895px; width: 100%; font-weight: 400;}
#about h3{font-size: 1.8em;margin-top: .5em;}
#about p{line-height: 2; font-weight: 300; margin-top: .5em;}
#about p span{font-size: .8em;}
#about .btn{/* background: var(--gradation-right); */ margin-top: 2em; width: 400px;}

@media screen and (max-width: 768px){
  #about{margin-top: 3em;}
  #about .btn{width: 100%;}
}
/*-----------
footer
-----------*/
footer{background: #ffd7c3; padding: 2em 3em; justify-content: space-between; font-size: .8em; margin-top: 5em;}
footer.flex,footer .flex{align-items: center;}
footer .social li{width: 35px; margin-left: 1em; line-height: 1;}
/*-----------
scroll
-----------*/
.window-scroll,.window-open{transform: translateY(100px); opacity: 0;}
.window-open.up,.window-scroll.up{animation: up01 1s ease forwards; transform: translateY(0); opacity: 1;}

@keyframes up01{
	0%{transform: translateY(100px); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}