@charset "utf-8";
.bk-color,
footer #fback span::before, 
.bkhover::after, 
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a .icon::before { animation: bk-color 120.0s ease-in infinite forwards;}
@keyframes bk-color{
0% { background:rgb(255, 242, 156); color: #444;}
13% { background:rgb(255, 242, 156); color: #444;}
20% { background:rgb(181, 221, 146); color: #444;}
33% { background:rgb(181, 221, 146); color: #444;}
40% { background:rgb(140, 223, 223); color: #444;}
53% { background:rgb(140, 223, 223); color: #444;}
60% { background:rgb(209, 202, 255); color: #444;}
73% { background:rgb(209, 202, 255); color: #444;}
80% { background:rgb(255, 199, 167); color: #444;}
93% { background:rgb(255, 199, 167); color: #444;}
100% { background:rgb(255, 242, 156); color: #444;}
}
/**/
.bk-border{ animation: bk-border 120.0s ease-in infinite forwards;}
@keyframes bk-border{
0% { border-color:rgb(255, 242, 156);}
13% { border-color:rgb(255, 242, 156);}
20% { border-color:rgb(181, 221, 146);}
33% { border-color:rgb(181, 221, 146);}
40% { border-color:rgb(140, 223, 223);}
53% { border-color:rgb(140, 223, 223);}
60% { border-color:rgb(209, 202, 255);}
73% { border-color:rgb(209, 202, 255);}
80% { border-color:rgb(255, 199, 167);}
93% { border-color:rgb(255, 199, 167);}
100% { border-color:rgb(255, 242, 156);}
}

/*==============================================
  header menuBtn
================================================*/
.backgroundimage{ opacity: 0; pointer-events: none;}
.opBody .backgroundimage{ animation: backgroundimage-img 2.0s 1 forwards;}
@keyframes backgroundimage-img {
0% { opacity: 0;}
100% { opacity: 1;}
}


@media screen and (max-width: 650.1px) {
.backgroundimage.createbk span.image1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image3{ background:url(../img/create/type3.webp) 30% 50%; opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image4{ background:url(../img/create/type4.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image5{ background:url(../img/create/type5.webp); opacity: 0.7; background-size: cover;}
/**/
.backgroundimage.pageback span.image1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image3{ background:url(../img/create/type3.webp) 30% 50%; opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image4{ background:url(../img/create/type4.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image5{ background:url(../img/create/type5.webp); opacity: 0.7; background-size: cover;}
/**/
.backgroundimage.servicepage span.cp1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.cp2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.dev1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.dev2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.op1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.op2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.lp1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.lp2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.re1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.re2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.sh1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.sh2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}

}
@media screen and (min-width: 650px) {
.backgroundimage.createbk span.image1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image3{ background:url(../img/create/type3.webp) 30% 50%; opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image4{ background:url(../img/create/type4.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.createbk span.image5{ background:url(../img/create/type5.webp); opacity: 0.7; background-size: cover;}
/**/
.backgroundimage.pageback span.image1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image3{ background:url(../img/create/type3.webp) 30% 50%; opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image4{ background:url(../img/create/type4.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.pageback span.image5{ background:url(../img/create/type5.webp); opacity: 0.7; background-size: cover;}
/**/
.backgroundimage.servicepage span.cp1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.cp2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.dev1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.dev2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.op1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.op2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.lp1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.lp2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.re1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.re2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.sh1{ background:url(../img/create/type1.webp); opacity: 0.7; background-size: cover;}
.backgroundimage.servicepage span.sh2{ background:url(../img/create/type2.webp); opacity: 0.7; background-size: cover;}

}

/*==============================================
  header menuBtn
================================================*/
@media screen and (min-width: 800px) {
#menuBtn{ display: none;}
}
@media screen and (max-width: 800px) {
/*800xp以上*/
#menuBtn{ width: 60px; height: 60px; display: flex; justify-content: flex-end; position: fixed; right: 0; top:0; z-index: 10000; background:rgba(0,0,0,.0);transition: 0.4s;}
#menuBtn .menuBtn-line{ width: 50px; height: 50px; margin: 5px; display: block; position: relative; border-radius: 100%; box-shadow: 0 8px 12px rgba(0,0,0,.1); background: rgba(255,255,255,.7);}
.openMenu #menuBtn{ width: 100%; box-shadow: 0; background: linear-gradient(to right, rgba(255,255,255,1) 70%,rgba(221,221,221,1) 100%);}
.openMenu #menuBtn .menuBtn-line{ box-shadow: none; background: rgba(255,255,255,.0);}
#menuBtn .menuBtn-line::after{ width:24px; height: 1px; background: #000; position: absolute; left: 13px; top: 50%; content: ""; transition: 0.4s;}
.openMenu #menuBtn .menuBtn-line::after { width: 0px;}
#menuBtn .menuBtn-line .l1, 
#menuBtn .menuBtn-line .l2{ width: 24px; height: 1px; position: absolute; left: 13px; top: 50%; background: #000; transition: 0.4s;}
#menuBtn .menuBtn-line .l1{ margin-top: 8px;}
#menuBtn .menuBtn-line .l2{ margin-top: -8px;}
.openMenu #menuBtn .menuBtn-line .l1{ margin-top: 0px; transform:rotate(45deg);}
.openMenu #menuBtn .menuBtn-line .l2{ margin-top: 0px; transform:rotate(-45deg);}
}
/*---------
  h1.logo
-----------*/
.page_logo{ height: 70px; position: fixed; left: 0; top: 0; width: auto; display: flex; z-index: 10000001; transition: 0.4s;}
.page_logo a{ display: flex; justify-content: center; align-items: center; padding: 0 20px;}
.page_logo a:hover{ opacity: 0.3;}
.page_logo a img{ width: auto; height: 16px;}
.page_logo a .bb{ display: block;}
.page_logo a .ww{ display: none;}
.scroll .page_logo{ height: 50px;}
@media screen and (max-width: 800px) {
.page_logo{ position: absolute; transition: 0.4s; z-index: 90000; }
.scroll .page_logo{ opacity: 0;}
.scroll.openMenu .page_logogo, 
.openMenu .page_logo{ height: 50px !important; position: fixed; pointer-events: none; opacity: 1;}
}
/*---------
  main
-----------*/
@media screen and (min-width: 800.01px) {
.under-main main{ margin-bottom: 50vh;}
.under-main #breadcrumbs{ background: none; border-top: none;}
.under-main #breadcrumbs *{ color: #fff !important;}
}

/*---------
  header
-----------*/
@media screen and (min-width: 800px) {
header{ width: 100%; position: fixed; left: 0; top: 0; display: flex; justify-content: space-between; z-index: 1000000;}
.scroll header{ border-bottom: solid 1px #ccc; background: #fff;}
/**/
header nav .header-menu .hd-nav.we-aer{ display: none;}
/**/
header nav{ display: block; flex: 1; margin:0 20px;}
header nav .header-menu{ display: flex; justify-content: flex-end; max-width: 1600px;}
/*--▼hd1----*/
header nav .header-menu .hd-nav { position: relative;}
header nav .header-menu .hd-nav .hd1{ position: relative; z-index: 100;}
header nav .header-menu .hd-nav .hd1 p{ display: flex;}
header nav .header-menu .hd-nav .hd1 p .hd-link { height: 70px; padding: 0 5px; display: flex; justify-content: center; align-items: center; transition: 0.4s; position: relative;}
header nav .header-menu .hd-nav .hd1 p span.hd-link::before{ width: 13px; height: 9px; display: flex; display: flex; align-items: center; justify-content: center; position: absolute; content: "+"; font-size: 11px; right: 3px; top: 20px; border-bottom: solid 0px #aaa; border-right: solid 0px #aaa; transition: 0.3s;}
.scroll header nav .header-menu .hd-nav .hd1 p span.hd-link::before{ top: 10px;}
header nav .header-menu .hd-nav .hd1 p span.hd-link:hover::before{ width: 5px; height: 5px;content: ""; transform: rotate(45deg); border-bottom: solid 1px #000; border-right: solid 1px #000; top: 20px; right: 4px;}
.scroll header nav .header-menu .hd-nav .hd1 p .hd-link { height: 50px;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span{ height: 14px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span{ display: block; height: 14px; line-height: 14px; transform: scale(0.8,0.8); font-size: 14px; transition: 0.4s; text-align: center; color: #555;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.eng{ color: #000; font-weight: 500;}
header nav .header-menu .hd-nav:hover .hd1 p .hd-link > span > span.j{ margin-top: -14px;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ color: #333; font-weight: 400;}
.scroll header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ color: #555;}
header nav .header-menu .hd-nav .hd1::after{ width: 0%; height: 3px; position: absolute; left: 50%; bottom: 0px; content: ""; background: #111; transition: 0.4s; }
header nav .header-menu .hd-nav.hd-hd2 .hd1::after{ display: none;}
header nav .header-menu .hd-nav:hover .hd1::after{ width: 60%; left: 20%;}
header nav .header-menu .hd-nav.active p .hd-link > span > span.j{ font-weight: bold; color: #000;}

header nav .header-menu .hd-nav#hd-contact .hd1::after{ display: none !important;}
/*--▼hd2----*/
header nav .header-menu .hd-nav .hd2{ width: auto; height: auto; position:absolute; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); top: 50px; flex-wrap: nowrap; justify-content: space-between; background: #fff; transition: 0s; z-index: 10; box-shadow: 0 8px 18px rgba(0,0,0,.3); border-radius: 20px; padding:15px 20px;}
header nav .header-menu .hd-nav#hd-contact .hd2{ left:auto; right: 4px; transform: translate(0%, 0); -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0);}
header nav .header-menu .hd-nav .hd2{ opacity: 0; pointer-events: none;}
header nav .header-menu .hd-nav.pcmenu-open .hd2{ display: flex; top: 52px; opacity: 1; pointer-events: fill; transition: 0.2s;}
.scroll header nav .header-menu .hd-nav.pcmenu-open .hd2{ top: 46px;}
/*--▼hd2 hd2-list----*/
header nav .header-menu .hd-nav .hd2 .hd2-list{ width: 100%; display: flex;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
/*hd-box-p*/
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a{ width: 100%; display: flex; padding: 12px 5px 12px 25px; justify-content: flex-start; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p *{word-break: keep-all;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a::before, 
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a::after{ content: ""; height: 1px !important; position: absolute; left: 3%; bottom: 0px; transition: 1.4s; z-index: 20;} 	
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a::before{ width: 0px; background: #fff; z-index: 5;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a::after{ width: 94%; background: #fff; z-index: 4; transform: 0.1s;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a:hover::before{ width: 94%; background: #eee;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a:hover::after{ background: #777;}
/**/
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a .icon{ width: 12px; height: 12px; position: absolute; left: 12px; top:50%; margin-top: -6px; display: block; overflow: hidden; border-radius: 100%; background: #666; transform: scale(0.2,0.2);}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a:hover .icon{ transform: scale(1,1);}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a .icon::after{ width: 12px; height: 12px; position: absolute; left: -12px; top: 0; display: block; border-radius: 100%; background:#ccc; transition: 0.2s; content: ""; z-index: 10; transform: rotate(-90deg);}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a:hover .icon::after{ left: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a .icon::before{ width: 15px; height: 15px; line-height: 15px; display: flex; justify-content: center; align-items: center; position: absolute; left: -12px; top: -2.5px; border-radius: 100%; transition: 0.8s; content: "▼"; transform: rotate(-90deg); z-index: 11; font-size: 5px; color: #111; padding-bottom: 1px;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a:hover .icon::before{ left: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a .txt{ display:flex; align-items:center; line-height: 1.1em; transform: scale(0.85,0.85); font-size: 14px; transition: 0.2s; font-weight: 500;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a:hover .txt{ color: #000;}
/**/
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span.comingsoon a{ pointer-events: none; color: #666; padding-left:0px; }
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span.comingsoon a::before{ content: "[ページ制作中]"; font-size: 9px; letter-spacing: 0; font-weight: 400; margin-right: 3px;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span.comingsoon a span{ display: none;}
/*--hd-contact---*/
header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link::after{ content: ""; width: 96%; height:30px; position: absolute; left: 2%; top: 50%; background: #fff;  transform: translateY(-50%); border-radius: 20px; z-index: -1; border: solid 1px #aaa; transition: 0.3s;}
.scroll header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link::after{ height:24px;}
header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link::before{ display: none;}
header nav .header-menu .hd-nav#hd-contact .hd1 .hd-link .j{ font-size: 14px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list{ }
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list p{ display: block;font-size: 13px; padding-left: 10%;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list p span{ font-size: 10px; padding: 1px 4px 2px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list{ align-items:center; flex-direction: row-reverse;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr { display: flex; min-width: 200px; padding: 0;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a{ width: 100%; height: 46px; display: flex; justify-content: center; border-radius: 5px; background: #B11D1F; margin: 8px 10px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a{ border: solid 3px #BC4042; background: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a *{ color: #BC4042;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr.form a{ border: none; background: #BC4042; margin-bottom: 5px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr.form a *{ color: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; font-weight: 500; line-height: 1em; padding-top: 6px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr.form a .txt { padding: 0 !important;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a .txt .min { font-size: 9px; font-weight: 400; opacity: 0.7; margin-top: 3px;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a:hover{ background:#7C1516; border: solid 3px #7C1516;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a:hover *{ color: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr.form a:hover{ border: none;}
}
@media screen and (min-width: 1200px) {
/*1200以上*/
header nav .header-menu .hd-nav .hd1 p{ padding: 0 5px;}
}
@media screen and (min-width: 800px) {
/*--------------
800xp以上
カレント指定create-operation
------------------*/	
.flow header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.flow, 
.create header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.create, 
.create-operation header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.operation, 
.create-lp header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.lp, 
.renewal header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.renewal, 
.concept header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.concept, 
.price header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.price, 
.faq header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.faq { background:#222; color: #fff !important; pointer-events: none;}
.flow header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.flow span, 
.create header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.create span, 
.create-operation header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.operation span, 
.create-lp header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.lp span, 
.renewal header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.renewal span, 
.concept header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.concept span, 
.price header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.price span, 
.faq header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a.faq span { display: none;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p.on a{ background: #222; border-radius: 4px; pointer-events: none;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p.on a .txt{ color: #fff;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p.on a .icon, 
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p.on a::before, 
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p.on a::after{ display: none;}
}
@media screen and (min-width: 800px) and (max-width: 950px) {
.page_logo a{ padding: 0 5px;}
header nav{ margin: 0 3px;}
header nav .header-menu .hd-nav .hd1 p .hd-link{ margin: 0;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span, 
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j, 
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span{ font-size: 12px; letter-spacing: 0;}
}



@media screen and (max-width: 800px) {
header nav .header-menu .hd-nav .hd1{ border-bottom: solid 1px #fff;}
header nav .header-menu .hd-nav .hd1 p a.hd-link, 
header nav .header-menu .hd-nav .hd1 p span.hd-link { height:90px;}
/**/
header{ width: 100%; height: 100%; background: #fff; position: fixed; left: auto; right: -100%; top: 0; display: block; z-index: 1000; transition: 0.4s; opacity: 0;}
.openMenu header{ right: 0; opacity: 1;}
/**/
header nav{ width: 100%; height:100%; margin:0px; padding-top: 60px; overflow-x: hidden; overflow-y: auto;}
header nav .header-menu{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
header nav .header-menu .hd-nav{ width: 100%; display: flex; flex-direction: column; background: #ddd;}
/*--▼hd1----*/
header nav .header-menu .hd-nav .hd1{ display: block; background: #fff;}
header nav .header-menu .hd-nav .hd1 p{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd1 p .hd-link { width: 100%; display: block;}
header nav .header-menu .hd-nav .hd1 p a.hd-link { display: flex; align-items: center; padding: 0 10px 0 40px; position: relative;}
header nav .header-menu .hd-nav .hd1 p a.hd-link::before{ font-size: 10px; line-height: 1em; position: absolute; left: 10px; top: 50%; content: "▼"; transform: rotate(-90deg); color: #ccc; margin-top: -5px;}
header nav .header-menu .hd-nav .hd1 p span.hd-link { display: flex; align-items: center; padding: 0 10px 0 40px;  position: relative;}
header nav .header-menu .hd-nav .hd1 p span.hd-link::before, 
header nav .header-menu .hd-nav .hd1 p span.hd-link::after{ content: ""; background: #555; position: absolute; top: 50%;} 
header nav .header-menu .hd-nav .hd1 p span.hd-link::before{ width: 14px; height: 1px; left: 10px;}
header nav .header-menu .hd-nav .hd1 p span.hd-link::after{ width: 1px; height: 14px; left: 17px; margin-top: -7px;}
header nav .header-menu .hd-nav.active .hd1 p span.hd-link::before{ width: 10px; left: 12px; background: #888;}
header nav .header-menu .hd-nav.active .hd1 p span.hd-link::after{ display: none;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span{ display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span{ }
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ font-size: 11px; padding-left: 10px; color: #777;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j::before{ content: "|"; color: #999; vertical-align: text-bottom; padding-right: 10px; font-weight: 200;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.e{ font-size: 18px;}
/*--▼hd2----*/
header nav .header-menu .hd-nav .hd2{ width: 94%; display: none; margin: 10px 3% 20px; background: #fff; border: solid 1px #aaa; border-radius: 4px; flex-direction: column; position: relative;}
header nav .header-menu .hd-nav.active .hd2{ display: flex;}
/*--▼hd2 hd2-list----*/
header nav .header-menu .hd-nav .hd2 .hd2-list{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link { width: 100%; height: 40px; display: flex; justify-content: flex-start; align-items: center; border-bottom: solid 1px #d0d0d0; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 a.hd-link::before{ width: 6px; height: 6px; content: ""; border-radius: 100%; border: solid 4px #ccc; position: absolute; left: 7px; top: 50%; margin-top: -6px;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link b{ display: flex; justify-content: flex-start; align-items: baseline; padding: 0 28px;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link b span{  padding-left: 5px;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link b, 
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link b span { font-size: 14px; font-weight: 300;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link span.pcmenu{ display: none;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 a.hd-link span{ }
/**/
header nav .header-menu .hd-nav .hd2 .hd2-list#menu-me h2 { }
header nav .header-menu .hd-nav .hd2 .hd2-list#menu-me h2 span{ }
/*--▼hd2 hd2-list----*/
header nav .header-menu .hd-nav .hd2 .hd2-list, 
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box, 
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block{ width: 100%; display: flex; flex-direction: column; padding: 0;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block{ box-shadow: 0 0 0 1px #d0d0d0 inset;}

/*hd-box-block*/
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block h3{ background: #ddd; display: flex; align-items: center; justify-content: flex-start; padding: 4px 4px 4px 10px; border-bottom: solid 1px #d0d0d0;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block h3 span{ font-size: 9px; font-weight: 500; line-height: 1em;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block h3 a{ display: none;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p{ display: flex; flex-wrap: wrap;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span{ width: 50%;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a{ width: 100%; display: flex; padding: 4px 5px 4px 15px; border-bottom: solid 1px #d0d0d0; font-size: 10px; position: relative;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a::before{ position: absolute; left: 4px; top: 50%; font-size: 6px; line-height: 1em; content: "▼"; transform: rotate(-90deg); margin-top: -3px; color: #bbb;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span:nth-child(odd) a{ border-right: solid 1px #d0d0d0;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a span{ }
/*hd-box-p*/
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p{ width: 100%; display: block;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a{ width: 100%; display: flex; align-items: center; position: relative; height: 36px; font-size: 14px; padding-left:20px; border-bottom: solid 1px #d0d0d0;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a::before{ position: absolute; left: 4px; top: 50%; font-size: 6px; line-height: 1em; content: "▼"; transform: rotate(-90deg); margin-top: -3px; color: #bbb;}
/**/
header nav .header-menu .hd-nav#hd-contact { background: #fff;}
header nav .header-menu .hd-nav#hd-contact .hd1, 
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list { display: none;}
header nav .header-menu .hd-nav#hd-contact .hd2{ width: 90%; margin: 20px 5% 60px; background: none; border: none; border-radius: 0; display: flex !important;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr{ width: 100%; display: flex; padding: 20px 0; margin: 0;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr.form{ width: 100%; padding: 10px 0;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr.form a{ height: 100px; background: #CC292C;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a{ width: 100%; height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; background:#EF7E1C; border-radius: 6px; }
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a .txt{font-size: 15px; color:#fff; font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center;}
header nav .header-menu .hd-nav#hd-contact .hd2 .hd2-list .hd-ctr a .txt .min{font-size: 11px; color:#fff; font-weight: 400;}
}
@media screen and (max-width: 520px) {
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.e{ font-size: 4.4vw;}
header nav .header-menu .hd-nav .hd1 p .hd-link > span > span.j{ font-size: 3.2vw;}
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link b,
header nav .header-menu .hd-nav .hd2 .hd2-list h2 .hd-link b span{ font-size:3.2vw;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-block p > span a{ font-size: 2.6vw;}
header nav .header-menu .hd-nav .hd2 .hd2-list .hd-box .hd-box-p a .txt{ font-size: 2.6vw;}
}

/*-----------
pageup
--------------*/
.pageup{ width: 100px; height: 100px; position:fixed; right: -20px; bottom: 10px; z-index: 30000; transition: 0.5s; transform: scale(0,0);}
.scroll .pageup{ transform: scale(1,1);}
.pageup a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0.7;}
.pageup a:hover{opacity: 1;}
.pageup a span{ width: 100%; display: block; line-height: 1.1em; color: #000; font-size: 14px; font-weight: 500; text-align: center;}
.pageup a img.cta_area{ width: 100px; height: 100px; position: absolute; right: 0%; top: 0%; transition: 0s !important;}
.pageup a:hover span{ line-height: 1.3em;}
.pageup a:hover img.cta_area{transform: rotate(0deg) !important; transition: 2s !important;}
@media screen and (max-width: 750px) {
.pageup, 
.pageup a img.cta_area{ width: 70px; height: 70px;}
.pageup a span{ font-size: 10px;}
}

/*==============================================
footer
===============================*/
footer{ width: 100%;}
@media screen and (min-width: 1382px) {
/*1300の94% 1300以上*/
#footerNav #footerMenu .footerInfo p, 
#footerNav #footerMenu .footerInfo .textAria{ left: 50%; margin-left: -650px;}
#footerNav #footerMenu .fNav .fTxt{ right: 50%; margin-right: -650px;}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox{ right: 50%;}
#footerNav #footerMenu .fNav .fMenu .navBox.nv2{ margin-right: -200px;}
#footerNav #footerMenu .fNav .fMenu .navBox.nv1{ margin-right: -400px;}
}
@media screen and (min-width: 850px) and (max-width: 1382px) {
/* 850以上 1300以下*/
#footerNav #footerMenu .footerInfo p, 
#footerNav #footerMenu .footerInfo .textAria{ left: 3%;}
#footerNav #footerMenu .fNav .fTxt{ right: 2%;}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox.nv2{ right: calc(2% + 260px);}/* fTxt横200 余白60 */
#footerNav #footerMenu .fNav .fMenu .navBox.nv1{ right: calc(2% + 480px);}/* fTxt横200 余白60 navBox.nv1横140 余白40*/
}
@media screen and (min-width: 850px) and (max-width: 1000px) {
#footerNav #footerMenu .fNav .fTxt p > span a{ font-size: 12px !important; font-weight: 400 !important;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt{ font-size: 12px !important; font-weight: 400 !important;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt::before{ content: ":"; padding: 0 2px;}
#footerNav #footerMenu .fNav .fTxt{ width: 170px !important;}
#footerNav #footerMenu .fNav .fMenu .navBox.nv2{ right: calc(2% + 220px) !important;}/* fTxt横200 余白60 */
#footerNav #footerMenu .fNav .fMenu .navBox.nv1{ right: calc(2% + 400px) !important;}/* fTxt横200 余白60 navBox.nv1横140 余白40*/
}

@media screen and (min-width: 850px) {
/* 850以上*/
/*----------------------------*/
#footerNav { position: relative; width: 100%; height: 440px; overflow: hidden;}
#footerNav #footerMenu {}
#footerNav #footerMenu .footerInfo{}
#footerNav #footerMenu .footerInfo * { font-weight: 300; color: #666;}
#footerNav #footerMenu .footerInfo p{ width: 140px; position: absolute; top:50px; z-index: 1000;}
#footerNav #footerMenu .footerInfo .textAria{ width: 190px; position: absolute; top:100px; z-index: 1000;}
#footerNav #footerMenu .footerInfo h1{ font-size: 11px; padding-left: 5px; color: #333;}
#footerNav #footerMenu .footerInfo ul { padding-left: 5px;}
#footerNav #footerMenu .footerInfo ul li{ width: 100%; display: block; font-size: 10px; margin: 3px 0;}
#footerNav #footerMenu .footerInfo ul li a{ text-decoration: underline;}
#footerNav #footerMenu .footerInfo ul li .add{ display: block; font-size: 10px; line-height: 1.1em; margin-bottom: 2px;}
#footerNav #footerMenu .footerInfo ul li .copy{ font-size: 11px; letter-spacing: 0;}
/*-----*/
#footerNav #footerMenu .fNav{ }
#footerNav #footerMenu .fNav .fTxt{ width: 200px; position: absolute; top: 50px; z-index: 1000;}
#footerNav #footerMenu .fNav .fTxt p{ display: flex; flex-direction: column; align-items: flex-start;}
#footerNav #footerMenu .fNav .fTxt p > span{ display: block; margin-bottom: 12px;}
#footerNav #footerMenu .fNav .fTxt p > span a{ width: auto; font-size: 15px; letter-spacing: 0; font-weight: 300; line-height: 1em; position: relative; white-space: nowrap; display: flex; align-items: baseline; }
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt{ font-weight: 300; font-size: 13px; letter-spacing: -1px;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt::before{ content: ":"; padding: 0 3px;}
#footerNav #footerMenu .fNav .fTxt p > span a .min{ font-size: 10.5px; letter-spacing: 0; font-weight: 300; padding-left: 5px; color: #555;}
#footerNav #footerMenu .fNav .fTxt p > span a .bk-color{ width: 0%; height: 4px; position: absolute; left: 0; bottom: 0; display: block; border-radius: 4px; z-index: -1; transition: 0.6s; opacity: 0.6;}
#footerNav #footerMenu .fNav .fTxt p > span a:hover .bk-color{ width: 100%;}

/**/
#footerNav #footerMenu .fNav .fMenu{}
#footerNav #footerMenu .fNav .fMenu *{ font-size: 12px;}
#footerNav #footerMenu .fNav .fMenu .navBox{ max-width: 220px; position: absolute; top: 50px; display: flex; flex-direction: column; z-index: 1000;}
#footerNav #footerMenu .fNav .fMenu .navBox h2{ display: flex; flex-direction: column; margin-bottom: 15px;}
#footerNav #footerMenu .fNav .fMenu .navBox h2 .en{ font-size: 14px; font-weight: 300; line-height: 1em;}
#footerNav #footerMenu .fNav .fMenu .navBox h2 .jp{ font-size: 9px; letter-spacing: 0; font-weight: 300; }
#footerNav #footerMenu .fNav .fMenu .navBox ul{}
#footerNav #footerMenu .fNav .fMenu .navBox ul li{ margin: 3px 0;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a{ font-size: 10.5px; font-weight: 300; position: relative; margin-left:0.8em; color: #555; white-space: nowrap;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a::before{ content: "・"; margin-left: -0.8em; opacity: 0.8;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a .bk-color{ width: 0%; height: 4px; position: absolute; left: 0; bottom: 0; display: block; border-radius: 4px; z-index: -1; transition: 0.6s; opacity: 0.6;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover { color: #000;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover .bk-color{ width: 100%;}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson{ pointer-events: none;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a{ color: #999;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a::after{ content: " [制作中]"; font-size: 9px; letter-spacing: 0;}
/**/
#footerNav .fotterText{ width: 1100px; position: absolute; left: 50%; bottom:30px; margin: 0 0 0 -550px; z-index: 100; padding: 10px; border-top: solid 1px #ddd;}
#footerNav .fotterText span{ display: block; font-size: 10px; letter-spacing: 0; color: #444; line-height: 1.3em; font-weight: 300;}
#footerNav .fotterText span a{ font-size: 9px; font-weight: 300; text-decoration: underline; color: #5C6C92;}
}
@media screen and (min-width: 850px) and (max-width: 1200px) {
#footerNav .fotterText{ width: 94%; left: 3%; bottom: 15px; margin: 0; padding: 10px 0; }
#footerNav .fotterText span{ font-size: 9px;}
#footerNav .fotterText span a{ font-size: 9px; font-weight: 300; text-decoration: underline; color: #5C6C92;}
}
@media screen and (max-width: 1100px) {
#footerNav .footerInfo{ width: 20%; left:3%;  margin-left:0;;}
}
@media screen and (max-width: 800px) {
#footerNav .footerInfo ul li, 
#footerNav .footerInfo ul li span{ font-size: 10px;}
}
@media screen and (max-width: 750px) {
#footerNav { height: auto; display: flex; flex-direction: column;}
#footerNav #footerMenu{ display: flex; flex-direction: column-reverse; width: 100%; padding: 40px 0;}
#footerNav .footerInfo{ width: 94%; position: relative; left: auto; top: auto; margin:0 6% 30px 0; align-items: center;}
#footerNav .footerInfo h1{ width: 60%; margin:0 20%;}
#footerNav .footerInfo h1 img, 
#footerNav .footerInfo ul, 
#footerNav .footerInfo ul li{ width: auto;}
#footerNav .footerInfo ul li{ font-size: 10px; color: #777;}
#footerNav .footerInfo ul li span{ font-size: 10px; color: #444;}
/*-----*/
#footerNav .fNav{ width: 100%; position: relative; left: auto; top: auto; right:auto !important; margin-bottom: 40px;}
}
@media screen and (max-width: 850px) {
/* 850以下*/
/*----------------------------*/
#footerNav { width: 100%; display:block;}
#footerNav #footerMenu { width: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-content: center;}
#footerNav #footerMenu .footerInfo{ width: 100%; display: flex; flex-direction: column-reverse; justify-content: center; align-items: center;}
#footerNav #footerMenu .footerInfo p{ width: 100%; padding: 120px 0; text-align: center; }
#footerNav #footerMenu .footerInfo img{ width: 60%; max-width: 140px;}
#footerNav #footerMenu .footerInfo .textAria{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#footerNav #footerMenu .footerInfo h1{ font-size: 12px; font-weight: 400; text-align: center;}
#footerNav #footerMenu .footerInfo ul { display: flex;  flex-direction: column; justify-content: center; align-items: center;}
#footerNav #footerMenu .footerInfo ul li{ display: flex; flex-direction: column;}
#footerNav #footerMenu .footerInfo ul li span, 
#footerNav #footerMenu .footerInfo ul li a{ display: block; font-size: 9px; line-height: 16px; line-height: 2.0em; font-weight: 300;}
#footerNav #footerMenu .footerInfo ul li a{ text-decoration: underline;}
#footerNav #footerMenu .footerInfo ul li .add{ }
#footerNav #footerMenu .footerInfo ul li .copy{ }
/*-----*/
#footerNav #footerMenu .fNav{ width: 100%; display: flex; justify-content: space-between;}
#footerNav #footerMenu .fNav .fTxt{ width: 30%; padding: 15px 5px;}
#footerNav #footerMenu .fNav .fTxt p{ width: 100%; display: flex; flex-direction: column; position: sticky; top: 10px;}
#footerNav #footerMenu .fNav .fTxt p > span{ display: block; margin: 10px 0;}
#footerNav #footerMenu .fNav .fTxt p > span a{ padding-left: 10px; position: relative;}
#footerNav #footerMenu .fNav .fTxt p > span a{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: 2.0vw; letter-spacing: 0; font-weight: 300;}
#footerNav #footerMenu .fNav .fTxt p > span a.clu .tt{ display: flex; font-size: 9px; letter-spacing: 0; font-weight: 300; color: #777; line-height: 1em;}
#footerNav #footerMenu .fNav .fTxt p > span a .min{ font-size: 9px; line-height: 1.3em; font-weight: 300; color: #777;}
#footerNav #footerMenu .fNav .fTxt p > span a .bk-color{ display: none;}

/**/
#footerNav #footerMenu .fNav .fMenu{ width: 68%; padding-bottom: 50px; margin-top: 15px; display: flex; flex-direction: row;}
#footerNav #footerMenu .fNav .fMenu *{ }
#footerNav #footerMenu .fNav .fMenu .navBox{ width: 49%; margin: 50px 1% 0 30px; display: flex; padding: 10px; border-radius:4px; flex-direction: column;}
#footerNav #footerMenu .fNav .fMenu .navBox h2{ width: 100%; display: flex; flex-direction: column; }
#footerNav #footerMenu .fNav .fMenu .navBox h2 .en{ font-size: 16px; font-weight: 300; line-height: 1.2em;}
#footerNav #footerMenu .fNav .fMenu .navBox h2 .jp{ font-size: 9px; font-weight: 300; line-height: 1em; border-bottom: solid 1px #999; padding-bottom: 15px; margin-bottom: 10px;}
#footerNav #footerMenu .fNav .fMenu .navBox ul{ width: 100%; display: flex; flex-wrap: wrap;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li{ width: 100%; display: block; line-height: 1.3em;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a{ font-size: 11px; font-weight: 300; color: #555;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a::before{ content: "・";}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a .bk-color{}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover { }
#footerNav #footerMenu .fNav .fMenu .navBox ul li a:hover .bk-color{}
/**/
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson{ }
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a{}
#footerNav #footerMenu .fNav .fMenu .navBox ul li.comminsson a::after{ }
/**/
#footerNav .fotterText{ width: 94%; margin: 0 3% 20px; border-top: double 3px #ccc; padding: 20px 0;}
#footerNav .fotterText span{ display: block; font-size: 8.5px; color: #555; line-height: 1.4em; font-weight: 300;}
#footerNav .fotterText span a{ font-size: 8.5px; font-weight: 300; text-decoration: underline; color: #5C6C92;}
}
@media screen and (max-width: 700px) {
#footerNav #footerMenu .fNav .fTxt p > span a{ font-size: 3.4vw;}
/**/
#footerNav #footerMenu .fNav .fMenu{ flex-direction: column;}
#footerNav #footerMenu .fNav .fMenu .navBox{ width: 100%; margin:40px 0 0;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li{ width: 50%;}
#footerNav #footerMenu .fNav .fMenu .navBox ul li a{ font-size: 2.3vw; letter-spacing: 0; padding: 5px 0;}
}

/*--back---------*/
footer #fback{ width: 100%; height: 100%; display: flex; flex-wrap: wrap; z-index: 1;}
footer #fback span{ width: 1%; height:10%; margin: 0; padding: 0; display:block; position: relative; background: #fff;}
footer #fback span::before{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; content: ""; opacity: 0; transition: 5.0s 5.0s;}
footer #fback span:hover::before{ opacity: 1; transition: 10.0s;}
@media screen and (max-width: 800px) {
footer{ background: rgba(255,255,255,.6);}
footer #fback{ display: none;}
}

/*================================
endCTA2
===============================*/
#endCTA2{ width: 100%; background: #888; padding: 100px 2%; position: relative; z-index: 10;}
#endCTA2 .ctaBox2{ width: 100%; max-width: 800px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 10;}
#endCTA2 .ctaBox2 h2{ text-align: center; font-size: 22px; font-weight: 300; color: #fff; margin-bottom: 30px; transition: 0.4s;}
#endCTA2 .ctaBox2 .mailTxt{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
#endCTA2 .ctaBox2 .mailTxt span{ color: #fff; font-size: 14px; line-height: 1.2em; padding: 4px 0; font-weight: 300; transition: 0.4s;}
#endCTA2.endCTA2-hover .ctaBox2 h2, 
#endCTA2.endCTA2-hover .ctaBox2 .mailTxt span{ color: #111;}
#endCTA2 .ctaBox2 h2 br, 
#endCTA2 .ctaBox2 .mailTxt span br{ display: none;}
#endCTA2 .ctaBox2 .linkBox{ width: 100%; display: flex; justify-content: space-between; margin-top: 40px;}
#endCTA2 .ctaBox2 .linkBox a{ width: 47%; height: 110px; padding-bottom: 5px; background: rgba(255,255,255,1); border: solid 1px #fff; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#endCTA2 .ctaBox2 .linkBox a *{ color: #111; transition: 0.6s; font-weight: 300;} 
#endCTA2 .ctaBox2 .linkBox a .en{ font-size: 11px; }
#endCTA2 .ctaBox2 .linkBox a .jp{ font-size: 17px; letter-spacing: 0; text-align: center;}
#endCTA2 .ctaBox2 .linkBox a .jp span{ font-size: 12px; display: block;}
#endCTA2 .bk-color{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; transition: 0.8s;}
@media screen and (min-width: 600px) {
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a:hover{ background: rgba(50,50,50,0.9); border: solid 1px rgba(50,50,50,0.9);}
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a{  background: rgba(255,255,255,0);}
#endCTA2.endCTA2-hover .ctaBox2 .linkBox a *{ color: #fff;} 
#endCTA2.endCTA2-hover .bk-color{ opacity: 0.6;}
}
@media screen and (max-width: 650px) {
#endCTA2 .ctaBox2 h2 br, 
#endCTA2 .ctaBox2 .mailTxt span br{ display:block;}
#endCTA2 .ctaBox2 h2{ font-size:6.0vw;}
}
@media screen and (max-width: 600px) {
#endCTA2{ background: #666; padding: 50px 2%;}
#endCTA2 .ctaBox2 .linkBox{ padding:0 2%; flex-direction: column;}
#endCTA2 .ctaBox2 .linkBox a{ width: 100%; height: 80px; box-shadow: 0 4px 8px rgba(0,0,0,.2);}
#endCTA2 .ctaBox2 .linkBox a.cu{ height: 140px; margin-bottom: 30px;}
#endCTA2 .bk-color{ opacity: 0.1;}
#endCTA2 .ctaBox2 .linkBox a .en{ font-size: 9px; line-height: 1em; font-weight: 500;}
#endCTA2 .ctaBox2 .linkBox a.cu .jp{ font-size:14px;}
#endCTA2 .ctaBox2 .linkBox a .jp span{ font-size: 10px;}
#endCTA2 .ctaBox2 .linkBox a.cu .en{ font-size: 11px;}
#endCTA2 .ctaBox2 .linkBox a.cu .jp{ font-size:5.8vw; font-weight: 500;}
#endCTA2 .ctaBox2 .linkBox a.cu .jp span{ font-size: 11px;}
}

/*================================
パンくず
===================================*/
#breadcrumbs{ width: 100%; display: flex; justify-content: center; align-items: center; border-bottom: solid 1px #ddd; background: #fff; position: relative; z-index: 11;}
#breadcrumbs .breadcrumbs{ width: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0 1%; max-width: 1200px; overflow-x: auto; overflow-y: hidden;}
#breadcrumbs .breadcrumbs ul{ display: flex;}
#breadcrumbs .breadcrumbs ul li{ display: block; margin-right: 5px; padding-right: 20px; position: relative;}
#breadcrumbs .breadcrumbs ul li::after{ width: 9px; height: 9px; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; content: ""; position: absolute; right: 5px; top: 50%; margin-top: -4.5px; transform: rotate(-45deg);}
#breadcrumbs .breadcrumbs ul li:last-child::after{ display: none;}
#breadcrumbs .breadcrumbs ul li a{ display: flex; align-items: center; justify-content: center; margin: 2px 0;}
#breadcrumbs .breadcrumbs ul li span, 
#breadcrumbs .breadcrumbs ul li a span{ display: flex; align-items: center; font-size: 11px; color: #777; line-height: 1em; padding:8px 4px; word-break: keep-all; white-space: nowrap;}
#breadcrumbs .breadcrumbs ul li:last-child span, 
#breadcrumbs .breadcrumbs ul li:last-child a span{ font-weight: bold;}
#breadcrumbs .breadcrumbs ul li:last-child span{ margin: 2px 0;}
#breadcrumbs .breadcrumbs ul li a:hover span{ color: var(--color1);}
@media screen and (max-width: 900px) {
#breadcrumbs{ border-top: solid 1px #ddd;}
}
@media screen and (max-width: 600px) {
#breadcrumbs .breadcrumbs ul li a{ height: 20px;}
}
/*==============================================
下層MV
===============================*/
#under-mv { min-height: 500px; align-items: center;}
#under-mv .inner-wrap{ padding: 35vh 10% 150px; position: relative;}
#under-mv .inner-wrap .under-mv-ttl{ display: flex; flex-direction: column-reverse;}
#under-mv .inner-wrap .under-mv-ttl h1{ font-size: 15px; letter-spacing: 2px; font-weight: 300;}
#under-mv .inner-wrap .under-mv-ttl p, 
#under-mv .inner-wrap .under-mv-ttl p span { font-size: 32px; letter-spacing: 4px;}
#under-mv .inner-wrap .txt{ width: 90%; display: flex; flex-direction: column; max-width: 600px;}
#under-mv .inner-wrap .txt span{ font-size: 13px; margin-top:70px;}
/**/
#under-mv .inner-wrap .under-mv-ttl.details-page{ flex-direction: column;}
#under-mv .inner-wrap .under-mv-ttl.details-page h1, 
#under-mv .inner-wrap .under-mv-ttl.details-page h1 span{ font-size: 26px;}
#under-mv .inner-wrap .under-mv-ttl.details-page p, 
#under-mv .inner-wrap .under-mv-ttl.details-page p span { font-size: 18px;}


@media screen and (max-width: 800px) {
#under-mv { min-height: 350px;}
#under-mv .inner-wrap{ padding: 25vh 6%;}
}
@media screen and (max-width: 600px) {
#under-mv .inner-wrap .under-mv-ttl p, 
#under-mv .inner-wrap .under-mv-ttl p span { font-size: 6.2vw; letter-spacing: 0.1em;}
#under-mv .inner-wrap .under-mv-ttl h1{ font-size: 3.2vw; margin-top: 5px;}
#under-mv .inner-wrap .txt span br{ display: none;}
/**/
#under-mv .inner-wrap .under-mv-ttl.details-page h1, 
#under-mv .inner-wrap .under-mv-ttl.details-page h1 span{ font-size: 4.4vw; letter-spacing: 0.1em;}
#under-mv .inner-wrap .under-mv-ttl.details-page p, 
#under-mv .inner-wrap .under-mv-ttl.details-page p span { font-size: 2.8vw; letter-spacing: 0.1em;}
}


/*===========================
回転
============================*/
#under-mv .txtimage{ width: 120%; height: auto; max-width: 1600px; position: absolute; top: -30%; left:3%; z-index: 1; pointer-events: none; animation: text-img-1 60.0s linear infinite forwards; pointer-events: none;}
#under-mv .txtimage img{ opacity: 0.25;}
@keyframes text-img-1 {
0% { transform:rotate(0deg);}
100% { transform:rotate(360deg);}
}