@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
*/
html {-webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%; }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0;	border:0; outline:0; list-style:none; vertical-align:middle; background:transparent; }
body { line-height:1; z-index: 1;}
img {border-style: none;} 
details,figcaption,figure{ display:block;}
nav ul, ul, li { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
*{box-sizing: border-box;}
table{border-collapse: collapse ;}
td{ position: relative;}
/*===================
 commons
=====================*/
:root {
/*
--cursor_color1:rgba(123,111,59,0.8);
--cursor_color2:rgba(228,184,0,0.8);
--cursor_color3:rgba(215,102,104,0.8);
--cursor_color4:rgba(205,181,79,0.80);
--color1: #C5A23B;
*/
--cursor_color1: rgba(200,155,75,0.80);
--cursor_color2: #f3eacf;
--cursor_color3: rgba(215,102,104,0.8);
--cursor_color4: rgba(221,195,153,0.80);
--color1: #DDC399;
--color_btn: #d0b581;
--color1_2: #d0b581;
--color2: #D5BB6E;
}

/*==============================================
  cursor
================================================*/
@media screen and (max-width: 800px) {
#cursor, #cursor *{ display: none;}
}
#cursor{ opacity: 1; z-index: 10000001000000; position: fixed; pointer-events: none;}
#cursor div{ width:10px; height:10px; position: absolute; left: 0%; top: 0%; pointer-events: none;  border-radius: 100%; margin: -5px 0 0 -5px; background: #000;}
#cursor div::after{ width:10px; height:10px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin: 30px 0 0 30px; pointer-events: none; content: ""; -webkit-transition:0.0s ease-in; -moz-transition: 0.2s ease-in; -o-transition:0.2s ease-in; transition: 0.2s ease-in; opacity: 0; mix-blend-mode: hard-light; }
/*a.a*/
#cursor div.cursor_a{ transform: scale(4,4); opacity: 0.6; background: rgba(0,0,0,.2); border: solid 1px var(--cursor_color1); transition: 0.4s;}
/*a.an*/
#cursor div.cursor_an::after{ opacity: 1; width:60px; height:60px; margin: 0;}
#cursor div.cursor_an{ background: none}
#cursor.cursor_an{ display: block; border-radius: 100%; margin: -30px 0 0 -30px; mix-blend-mode: hard-light;}
#cursor div.cursor_an .l1{ border: solid 1px #444; width: 60px; height: 60px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursorAct 1.2s ease-in infinite forwards; background: var(--cursor_color1);}
@keyframes cursorAct{
0%{transform:scale(1,1); opacity: 1;}
100%{transform:scale(1.4,1.4); opacity: 0;}
}

/*a.an*/
#cursor div.cursor_af{ background: none}
/* hover:円形 */
#cursor div.cursor_af{ width: 140px !important; height: 140px !important; background: none;}
#cursor.cursor_af{ display: block; border-radius: 100%; margin: -70px 0 0 -70px; mix-blend-mode:multiply;}
#cursor div.cursor_af::after{ opacity: 0.8; width: 140px; height: 140px; margin: 0; margin: -65px 0 0 -65px;}
#cursor div.cursor_af .l1{ width: 140px; height: 140px; content: ""; position: absolute; left: 5px; top: 5px; border-radius: 100%; animation: cursoractF 1.2s ease-in infinite forwards; border: solid 1px #000;}
@keyframes cursoractF{
0%{transform:scale(1,1); opacity: 0.4; background: var(--cursor_color3);}
100%{transform:scale(0.4,0.4); opacity: 0; background: var(--cursor_color2);}
}
/*a_close*/
#cursor div.cursor_a_close{ background: none;}
#cursor div.cursor_a_close .l1{ border: solid 1px #fff; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; border-radius: 100%; background:rgba(0,0,0,.7); display: flex; justify-content: center; align-items: center; margin: -50px 0 0 -50px;}
#cursor div.cursor_a_close .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "CLOSE"; color: #fff; font-size: 12px; transition: 0s; padding-top: 30px; font-family: 'Josefin Sans', sans-serif;}
#cursor div.cursor_a_close .l1::after{ content: "×"; transition: 0; color: #fff; font-size: 30px; line-height: 30px; width: 100%; pointer-events: none; text-align: center; position: absolute; left: 0; top: 15px; font-weight: 200; }

/*a_open*/
#cursor div.cursor_a_open{ background: none;}
#cursor div.cursor_a_open .l1{ border: solid 1px #fff; width: 60px; height: 60px; position: absolute; left: 50%; top: 50%; border-radius: 100%; background:var(--color1_2); display: flex; justify-content: center; align-items: center; margin: -30px 0 0 -30px;transition: 0.4s;}
#cursor div.cursor_a_open .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "OPEN"; color: #fff; transition: 0s; padding:5px 0; font-family: 'Josefin Sans', sans-serif; }
#cursor div.cursor_a_open .l1::after{ content: "▼"; transition: 0; color: #fff; line-height: 14px; width: 100%; pointer-events: none; text-align: center; position: absolute; left: 0; bottom: 5px; font-weight: 200; font-size: 9px;}

/*cursor_a_down*/
#cursor div.cursor_a_down{ background: none;}
#cursor div.cursor_a_down .l1{ width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; border-radius: 100%; border: solid 1px #999; display: flex; justify-content: center; align-items: center; margin: -18px 0 0 -18px; transition: 0.4s; background: rgba(255,255,255,.6);}
#cursor div.cursor_a_down .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "▼" !important; font-size: 9px; color: #555; transition: 0s;}

/*cursor_a_up*/
#cursor div.cursor_a_up{ background: none;}
#cursor div.cursor_a_up .l1{ width: 24px; height: 24px; position: absolute; left: 50%; top: 50%; border-radius: 100%; border: none; display: flex; justify-content: center; align-items: center; margin: -18px 0 0 -18px; transition: 0.4s;}
#cursor div.cursor_a_up .l1::before{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; content: "▲" !important; font-size: 9px; color: #fff; background:var(--cursor_color2); mix-blend-mode: multiply; transition: 0s; border-radius: 100%;}

/*===================
 LINK
=====================*/
a, a *, a:hover, a:hover * { -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;}
a { text-decoration: none; color: #3367d6;}
a:hover{ text-decoration: none; color: #3367d6;}

/*===================
 FONT
=====================*/
*{ color:#111; letter-spacing: 1.0px; font-family:'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; font-weight:300;}
.eng, 
.eng span,
.eng .tdata { font-family: 'Josefin Sans', sans-serif;}
.eng2, 
.eng2 span, 
.eng2 .tdata{ font-family: "Cormorant", serif;}
h1 { font-weight:500; font-size:20px; line-height:1.3em;}
h2,h3,h4,h5,h6 { font-weight:500; font-size:16px; line-height:1.3em;}
p,li,dt,dl,span,td { font-size:14px; line-height:1.6em; font-weight: 400;}
b, .b{font-weight: bold;}
img{ max-width: 100%; width: 100%; height: auto;}
.font9,
.font9 *{ font-size: 9px !important;}
.font10,
.font10 *{ font-size: 10px !important;}
.font11,
.font11 *{ font-size: 11px !important;}
.font12,
.font12 *{ font-size: 12px !important;}
.font13,
.font13 *{ font-size: 13px !important;}
.font14,
.font14 *{ font-size: 14px !important;}
.font15,
.font15 *{ font-size: 15px !important;}

@media screen and (max-width: 600px) {
.font_sp9,
.font_sp9 *{ font-size: 9px !important;}
.font_sp10,
.font_sp10 *{ font-size: 10px !important;}
.font_sp11,
.font_sp11 *{ font-size: 11px !important;}
.font_sp12,
.font_sp12 *{ font-size: 12px !important;}
.font_sp13,
.font_sp13 *{ font-size: 13px !important;}
.font_sp14,
.font_sp14 *{ font-size: 14px !important;}
.font_sp15,
.font_sp15 *{ font-size: 15px !important;}

}


/*===================
 共通
=====================*/
.block{ display: block !important;}
.inline-block{ display: inline-block !important;}
.flex{ display: flex !important;}
.row{ flex-direction: row !important;}
.column{ flex-direction: column !important;}
.flex-start{ justify-content: flex-start !important; align-items: flex-start !important;}
.flex-end{ justify-content: flex-end!important; align-items: flex-end !important;}
.flex-space-between{ justify-content: space-between !important;}
.center{ text-align: center !important; justify-content: center !important;}
.word-keep{ word-break: keep-all;}

/*=====================================
	CONTENTS
=======================================*/
html, body { width: 100%; max-width:100%; position: relative;}
body{ overflow-x:visible; overflow-y:visible;}
section, main, .section, .wrap{ width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; z-index: 5;}
.inner, 
.inner1100, 
.inner1000, 
.inner900, 
.inner800, 
.inner700{ width: 96%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; z-index: 2;}
.inner{ max-width: 1200px;} 
.inner1100{ max-width: 1100px;}
.inner1000{ max-width: 1000px;}
.inner900{ max-width: 900px;}
.inner800{ max-width: 800px;}
.inner700{ max-width: 700px;}

/*----------
margin padding
----------*/
.mt0{margin-top:0px !important;}
.mt5{margin-top:5px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt40{margin-top:40px !important;}
.mt45{margin-top:45px !important;}
.mt50{margin-top:50px !important;}
.mt55{margin-top:55px !important;}
.mt60{margin-top:60px !important;}
.mt65{margin-top:65px !important;}
.mt70{margin-top:70px !important;}
.mt75{margin-top:75px !important;}
.mt80{margin-top:80px !important;}
.mt85{margin-top:85px !important;}
.mt90{margin-top:90px !important;}
.mt95{margin-top:95px !important;}
.mt100{margin-top:100px !important;}

.mr0{margin-right:0px !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mr15{margin-right:15px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}

.mb0{margin-bottom:0px !important;}
.mb5{margin-bottom:5px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !important;}
.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important;}
.mb35{margin-bottom:35px !important;}
.mb40{margin-bottom:40px !important;}
.mb45{margin-bottom:45px !important;}
.mb50{margin-bottom:50px !important;}

.ml0{margin-left:0px !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml15{margin-left:15px !important;}
.ml20{margin-left:20px !important;}
.ml25{margin-left:25px !important;}

.pt0{padding-top:0px !important;}
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}
.pt30{padding-top:30px !important;}
.pt35{padding-top:35px !important;}
.pt40{padding-top:40px !important;}
.pt45{padding-top:45px !important;}
.pt50{padding-top:50px !important;}

.pr0{padding-right:0px !important;}
.pr5{padding-right:5px !important;}
.pr10{padding-right:10px !important;}
.pr15{padding-right:15px !important;}
.pr20{padding-right:20px !important;}
.pr25{padding-right:25px !important;}

.pb0{padding-bottom:0px !important;}
.pb5{padding-bottom:5px !important;}
.pb10{padding-bottom:10px !important;}
.pb15{padding-bottom:15px !important;}
.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}
.pb30{padding-bottom:30px !important;}
.pb35{padding-bottom:35px !important;}
.pb40{padding-bottom:40px !important;}
.pb45{padding-bottom:45px !important;}
.pb50{padding-bottom:50px !important;}

.pl0{padding-left:0px !important;}
.pl5{padding-left:5px !important;}
.pl10{padding-left:10px !important;}
.pl15{padding-left:15px !important;}
.pl20{padding-left:20px !important;}
.pl25{padding-left:25px !important;}


/*-----------
アニメーション
--------------*/
.mvAnime > span, 
#mvTitle p .mvAnime > span { will-change: transform, opacity; opacity: 0; overflow: hidden; -webkit-transform: translateY(60px); transform: translateY(60px); }
#mvTitle p .mvAnime * { opacity: 0;}
.opBody .mvAnime span, 
.setView.setTit > span, 
.opBody2 #mvTitle p .mvAnime span{ opacity:1; -webkit-transform: translateY(0px); transform: translateY(0px);}

.opBody .mvAnime span:nth-child(1), 
.opBody1 .mvAnime2 span:nth-child(1), 
.setView.setTit > span:nth-child(1){ transition:0.6s 0.0s !important;}
.opBody .mvAnime span:nth-child(2), 
.opBody1 .mvAnime2 span:nth-child(2), 
.setView.setTit > span:nth-child(2){ transition:0.6s 0.05s !important;}
.opBody .mvAnime span:nth-child(3), 
.opBody1 .mvAnime2 span:nth-child(3), 
.setView.setTit > span:nth-child(3){ transition:0.6s 0.1s !important;}
.opBody .mvAnime span:nth-child(4), 
.opBody1 .mvAnime2 span:nth-child(4), 
.setView.setTit > span:nth-child(4){ transition:0.6s 0.15s !important;}
.opBody .mvAnime span:nth-child(5), 
.opBody1 .mvAnime2 span:nth-child(5), 
.setView.setTit > span:nth-child(5){ transition:0.6s 0.2s !important;}
.opBody .mvAnime span:nth-child(6), 
.opBody1 .mvAnime2 span:nth-child(6), 
.setView.setTit > span:nth-child(6){ transition:0.6s 0.25s !important;}
.opBody .mvAnime span:nth-child(7), 
.opBody1 .mvAnime2 span:nth-child(7), 
.setView.setTit > span:nth-child(7){ transition:0.6s 0.3s !important;}
.opBody .mvAnime span:nth-child(8), 
.opBody1 .mvAnime2 span:nth-child(8), 
.setView.setTit > span:nth-child(8){ transition:0.6s 0.35s !important;}
.opBody .mvAnime span:nth-child(9), 
.opBody1 .mvAnime2 span:nth-child(9), 
.setView.setTit > span:nth-child(9){ transition:0.6s 0.4s !important;}
.opBody .mvAnime span:nth-child(10), 
.opBody1 .mvAnime2 span:nth-child(10), 
.setView.setTit > span:nth-child(10){ transition:0.6s 0.45s !important;}
.opBody .mvAnime span:nth-child(11), 
.opBody1 .mvAnime2 span:nth-child(11), 
.setView.setTit > span:nth-child(11){ transition:0.6s 0.5s !important;}
.opBody .mvAnime span:nth-child(12), 
.opBody1 .mvAnime2 span:nth-child(12), 
.setView.setTit > span:nth-child(12){ transition:0.6s 0.6s !important;}
.opBody .mvAnime span:nth-child(13), 
.opBody1 .mvAnime2 span:nth-child(13), 
.setView.setTit > span:nth-child(13){ transition:0.6s 0.65s !important;}
.opBody .mvAnime span:nth-child(14), 
.opBody1 .mvAnime2 span:nth-child(14), 
.setView.setTit > span:nth-child(14){ transition:0.6s 0.7s !important;}
.opBody .mvAnime span:nth-child(15), 
.opBody1 .mvAnime2 span:nth-child(15), 
.setView.setTit > span:nth-child(15){ transition:0.6s 0.75s !important;}
.opBody .mvAnime span:nth-child(16), 
.opBody1 .mvAnime2 span:nth-child(16), 
.setView.setTit > span:nth-child(16){ transition:0.6s 0.8s !important;}
.opBody .mvAnime span:nth-child(17), 
.opBody1 .mvAnime2 span:nth-child(17), 
.setView.setTit > span:nth-child(17){ transition:0.6s 0.85s !important;}
.opBody .mvAnime span:nth-child(18), 
.opBody1 .mvAnime2 span:nth-child(18), 
.setView.setTit > span:nth-child(18){ transition:0.6s 0.9s!important;}
.opBody .mvAnime span:nth-child(19), 
.opBody1 .mvAnime2 span:nth-child(19), 
.setView.setTit > span:nth-child(19){ transition:0.6s 0.95s!important;}
.opBody .mvAnime span:nth-child(20), 
.opBody1 .mvAnime2 span:nth-child(20), 
.setView.setTit > span:nth-child(20){ transition:0.6s 1.0s!important;}
.opBody .mvAnime span:nth-child(21), 
.opBody1 .mvAnime2 span:nth-child(21), 
.setView.setTit > span:nth-child(21){ transition:0.6s 1.05s!important;}
.opBody .mvAnime span:nth-child(22), 
.opBody1 .mvAnime2 span:nth-child(22), 
.setView.setTit > span:nth-child(22){ transition:0.6s 1.1s!important;}
.opBody .mvAnime span:nth-child(23), 
.opBody1 .mvAnime2 span:nth-child(23), 
.setView.setTit > span:nth-child(23){ transition:0.6s 1.15s!important;}
.opBody .mvAnime span:nth-child(24), 
.opBody1 .mvAnime2 span:nth-child(24), 
.setView.setTit > span:nth-child(24){ transition:0.6s 1.2s!important;}
.opBody .mvAnime span:nth-child(25), 
.opBody1 .mvAnime2 span:nth-child(25), 
.setView.setTit > span:nth-child(25){ transition:0.6s 1.25s!important;}
.opBody .mvAnime span:nth-child(26), 
.opBody1 .mvAnime2 span:nth-child(26), 
.setView.setTit > span:nth-child(26){ transition:0.6s 1.3s!important;}
.opBody .mvAnime span:nth-child(27), 
.opBody1 .mvAnime2 span:nth-child(27), 
.setView.setTit > span:nth-child(27){ transition:0.6s 1.35s!important;}
.opBody .mvAnime span:nth-child(28), 
.opBody1 .mvAnime2 span:nth-child(28), 
.setView.setTit > span:nth-child(28){ transition:0.6s 1.4s!important;}
.opBody .mvAnime span:nth-child(29), 
.opBody1 .mvAnime2 span:nth-child(29), 
.setView.setTit > span:nth-child(29){ transition:0.6s 1.45s!important;}
.opBody .mvAnime span:nth-child(30), 
.opBody1 .mvAnime2 span:nth-child(30), 
.setView.setTit > span:nth-child(30){ transition:0.6s 1.5s!important;}
.opBody .mvAnime span:nth-child(31), 
.opBody1 .mvAnime2 span:nth-child(31), 
.setView.setTit > span:nth-child(31){ transition:0.6s 1.55s!important;}
.opBody .mvAnime span:nth-child(32), 
.opBody1 .mvAnime2 span:nth-child(32), 
.setView.setTit > span:nth-child(32){ transition:0.6s 1.6s!important;}
.opBody .mvAnime span:nth-child(33), 
.opBody1 .mvAnime2 span:nth-child(33), 
.setView.setTit > span:nth-child(33){ transition:0.6s 1.65s!important;}
.opBody .mvAnime span:nth-child(34), 
.opBody1 .mvAnime2 span:nth-child(34), 
.setView.setTit > span:nth-child(34){ transition:0.6s 1.7s!important;}
.opBody .mvAnime span:nth-child(35), 
.opBody1 .mvAnime2 span:nth-child(35), 
.setView.setTit > span:nth-child(35){ transition:0.6s 1.75s!important;}
.opBody .mvAnime span:nth-child(36), 
.opBody1 .mvAnime2 span:nth-child(36), 
.setView.setTit > span:nth-child(36){ transition:0.6s 1.8s!important;}
.opBody .mvAnime span:nth-child(37), 
.opBody1 .mvAnime2 span:nth-child(37), 
.setView.setTit > span:nth-child(37){ transition:0.6s 1.85s!important;}
.opBody .mvAnime span:nth-child(38), 
.opBody1 .mvAnime2 span:nth-child(38), 
.setView.setTit > span:nth-child(38){ transition:0.6s 1.9s!important;}
.opBody .mvAnime span:nth-child(39), 
.opBody1 .mvAnime2 span:nth-child(39), 
.setView.setTit > span:nth-child(39){ transition:0.6s 1.95s!important;}
.opBody .mvAnime span:nth-child(40), 
.opBody1 .mvAnime2 span:nth-child(40), 
.setView.setTit > span:nth-child(40){ transition:0.6s 2.0!important;}
/*fontアニメーション*/
.font-anime{ position: relative; display: block; max-width: 100%; overflow: hidden;}
.font-anime .txtdata{ position: relative; display: block;}
.font-anime .txtdata .tdata{ display: block; position: relative; vertical-align: middle;}
.font-anime .tdata.tdata_base{ color: #ddd;}
.font-anime .tdata.txtanime_data1{ mask-image: linear-gradient(to bottom, #000 40%, transparent 40%); }
.font-anime .tdata.txtanime_data2{ mask-image: linear-gradient(to bottom,transparent 40%,#000 40%,#000 55%,transparent 55%);}
.font-anime .tdata.txtanime_data3{ mask-image: linear-gradient(to bottom,transparent 55%,#000 55%,#000 70%,transparent 70%);}
.font-anime .tdata.txtanime_data4{ mask-image: linear-gradient(to bottom, transparent 70%, #000 70%);}
.font-anime .tdata.txtanime_data1, 
.font-anime .tdata.txtanime_data2, 
.font-anime .tdata.txtanime_data3, 
.font-anime .tdata.txtanime_data4{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; color: #000; pointer-events: none; transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
.font-anime .txtdata span.tdata:nth-child(n+6){opacity: 0 !important;}

/**/
.font-anime .tdata.txtanime_data1.font-anime-on{ animation: txtanime_data_frame1 0.8s 1 forwards;}
.font-anime .tdata.txtanime_data2.font-anime-on{ animation: txtanime_data_frame2 0.8s 1 forwards;}
.font-anime .tdata.txtanime_data3.font-anime-on{ animation: txtanime_data_frame3 0.8s 1 forwards;}
.font-anime .tdata.txtanime_data4.font-anime-on{ animation: txtanime_data_frame4 0.8s 1 forwards;}
@keyframes txtanime_data_frame1{
0% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
10%{ opacity: 0.2;}
40% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
100% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
}
@keyframes txtanime_data_frame2{
0% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
20% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
30%{ opacity: 0.2;}
60% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
100% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
}
@keyframes txtanime_data_frame3{
0% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
40% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
50%{ opacity: 0.2;}
80% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
100% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
}
@keyframes txtanime_data_frame4{
0% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
60% {transform: translateX(var(--x, 150%)) skewX(var(--skewX, -0deg)) scale(3,1); filter: blur(3px); opacity: 0;}
70%{ opacity: 0.2;}
100% { transform: translateX(var(--x, 0%)) skewX(var(--skewX, 0deg)) scale(1,1); filter: blur(0px); opacity: 1;}
}
/*font2アニメーション*/
.font-anime2, 
.font-anime2 > span{ position: relative; display: flex;}
.font-anime2 > span{ opacity: 0;}
.font-anime2.font-anime2_on > span{ opacity: 1;}
.font-anime2 > span span{ clip-path: inset(0 100% 0 0);}
.font-anime2 > span span.view{ animation: txtanime2_data_frame 0.3s 1 forwards;}
@keyframes txtanime2_data_frame{
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0% 0 0); }
}

/*================================
menuBtn
===============================*/
.hd_logo{ width: 120px; height: auto; position: fixed; left: 10px; top: 15px; display: block; z-index: 1000; transition: 0.4s; opacity: 1;}
.scroll .hd_logo{ transform: scale(0.6,0.6); left: 5px; top: 5px;}


/*================================
menuBtn
===============================*/
#menuBtn{ width: 80px; height: 80px; position: fixed; right: 0; top: 0; z-index: 100000; cursor: pointer;}
#menuBtn::after{ width: 140px; height: 140px; content: ""; border-radius: 100%; position: fixed; right: -40px; top: -50px; z-index: -1; cursor: pointer; transition: 0.6s; }
.close#menuBtn::after{ background: rgba(255,255,255,.05); box-shadow: 0 2px 10px rgba(0,0,0,.1); filter: blur(4px); transform: scale(0.4,0.4);}
.scroll .close#menuBtn::after{ background: rgba(255,255,255,.8); filter: blur(0px); transform: scale(1,1);}

.close#menuBtn:hover::after{ box-shadow: -20px 40px 400px rgba(0,0,0,.2);}
.open#menuBtn::after{ background: #222; box-shadow: 0 4px 8px rgba(0,0,0,1) inset;}
#menuBtn .menuBtn-line{ width: 100%; height: 100%; display:block;}
#menuBtn .menuBtn-line::before{ font-weight: 400; font-size: 12px; width: 100%; text-align: center; position: absolute; left: 0; top: 18px; font-family: 'Josefin Sans', sans-serif; transition: 0.6s;}
.close#menuBtn .menuBtn-line::before{ content: "MENU";}
.open#menuBtn .menuBtn-line::before{ content: "CLOSE"; color: #fff;}
#menuBtn .menuBtn-line span{ width: 50%; height: 60%; position: absolute; bottom: 0;}
#menuBtn .menuBtn-line span.l1{ left: 0;}
#menuBtn .menuBtn-line span.l2{ right: 0;}
#menuBtn .menuBtn-line span.l1::before, 
#menuBtn .menuBtn-line span.l1::after, 
#menuBtn .menuBtn-line span.l2::before, 
#menuBtn .menuBtn-line span.l2::after{ width: 20px; height: 1px; position: absolute; top: 35%; background: #000; content: ""; transition: 0.6s;}
#menuBtn .menuBtn-line span.l1::before{ right: 0; margin-top: -7px;}
#menuBtn .menuBtn-line span.l1::after{ right: 0; margin-top: 7px;}
#menuBtn .menuBtn-line span.l2::before{ left: 0; margin-top: -7px;}
#menuBtn .menuBtn-line span.l2::after{ left: 0; margin-top: 7px;}
.open#menuBtn .menuBtn-line span.l1::before{ transform: rotate(45deg); margin-top: -5px; right: -3px; background: #fff;}
.open#menuBtn .menuBtn-line span.l1::after{ transform: rotate(-45deg); margin-top: 9px; right: -3px; background: #fff;}
.open#menuBtn .menuBtn-line span.l2::before{ transform: rotate(-45deg); margin-top: -5px; left: -3px; background: #fff;}
.open#menuBtn .menuBtn-line span.l2::after{ transform: rotate(45deg); margin-top: 9px; left: -3px; background: #fff;}
@media screen and (min-width: 600px) {
.close#menuBtn:hover .menuBtn-line::before{ content: "OPEN"; top: 20px;}
.close#menuBtn:hover .menuBtn-line span.l1::before{ transform: rotate(20deg); margin-top: 0px;}
.close#menuBtn:hover .menuBtn-line span.l1::after{ transform: rotate(20deg); margin-top: 8px;}
.close#menuBtn:hover .menuBtn-line span.l2::before{ transform: rotate(-20deg); margin-top: 0px;}
.close#menuBtn:hover .menuBtn-line span.l2::after{ transform: rotate(-20deg); margin-top: 8px;}
/**/
.open#menuBtn:hover .menuBtn-line span.l1::before, 
.open#menuBtn:hover .menuBtn-line span.l1::after, 
.open#menuBtn:hover .menuBtn-line span.l2::before, 
.open#menuBtn:hover .menuBtn-line span.l2::after{ box-shadow: 0 0 0 2px #fff; background: #fff;}
}

@media screen and (max-width: 600px) {
#menuBtn{ width: 60px; height: 60px; }
#menuBtn .menuBtn-line::before{ top: 12px; font-size: 11px;}
#menuBtn::after{ width: 100px; height: 100px;  right: -25px; top: -30px;}
}


/*================================
header
===============================*/
header { width: 100%; height: 100%; position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; left: 0; top: 0;  overflow-y: auto; overflow-x: hidden; clip-path: ellipse(0% 0% at 100% 0%); transition: 0.6s; pointer-events: none; z-index: 5000;}
.bodyfixed header {clip-path: ellipse(3000px 3000px at 100% 0%); transition: 1.6s; pointer-events: all;}
header{ background: #303030;}
header .hd-wrap{ width: 100%; min-height: 600px; overflow-x:hidden; overflow-y:auto; display: flex; flex-direction: column-reverse; justify-content: center; padding:0 20px;}
header .hd-wrap .nav-left{ width: 100%; display: flex; flex-direction: column; padding-bottom: 30px;}
header .hd-wrap .nav-left p.logo{ display: none;}
header .hd-wrap .nav-left nav{ width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;}
header .hd-wrap .nav-left nav dl{ display: block; border: solid 1px rgba(255,255,255,.2); border-radius: 4px; width: 23%; margin: 20px 1% 10px; padding: 0 20px 20px;}
header .hd-wrap .nav-left nav dl dt{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 15px; padding-bottom: 10px; border-bottom: solid 1px rgba(255,255,255,.3); margin-top: -10px;}
header .hd-wrap .nav-left nav dl dt b{ background: #303030; color: #fff; font-size: 20px; font-weight: 300; padding-right: 10px;}
header .hd-wrap .nav-left nav dl dt span{ color: rgba(255,255,255,.6); font-size: 10px;}
header .hd-wrap .nav-left nav dl dd{ display: flex; justify-content: flex-start; align-items: center; margin: 5px 0; color: #ccc;}
header .hd-wrap .nav-left nav dl dd a{ color: #fff; font-size: 14px; line-height: 1.2em; padding: 4px 0; font-weight: 400;}
header .hd-wrap .nav-left nav dl dd a::before{ content: "・";}
header .hd-wrap .nav-left nav dl dd.now a{ color: #aaa; background: #222; pointer-events: none;}
/**/
header .hd-wrap .nav-left nav.hNav-end { display: flex; justify-content: flex-start; align-items: baseline; width: 100%;}
header .hd-wrap .nav-left nav.hNav-end p{ padding:0 10px;}
header .hd-wrap .nav-left nav.hNav-end p span{ font-size: 11px; color: #ddd; font-weight: 300;}
header .hd-wrap .nav-left nav.hNav-end ul{ display: flex; flex-wrap: wrap; align-items: baseline; padding: 0 15px;}
header .hd-wrap .nav-left nav.hNav-end ul li{ display: block; margin-right: 8px; padding-right: 10px; position: relative;}
header .hd-wrap .nav-left nav.hNav-end ul li::after{ content: "|"; color: rgba(255,255,255,.4); position: absolute; right: 0; top: 50%; height: 12px; line-height: 12px; font-size: 12px; margin-top: -6px;}
header .hd-wrap .nav-left nav.hNav-end ul li:last-child::after{ display: none; content: "";}
header .hd-wrap .nav-left nav.hNav-end ul li a{ display: block; font-size: 11px; color: #fff;}
/**/
header .hd-wrap .nav-right{ width: 100%; padding:0 10px 30px;}
header .hd-wrap .nav-right ul{ width: 100%; display: flex;}
header .hd-wrap .nav-right ul li{ display: block; margin-right: 30px;}
header .hd-wrap .nav-right ul li.pclogo{ display: flex; align-items: center; margin-right: 100px;}
header .hd-wrap .nav-right ul li.pclogo img{ width: 100px; height: auto;}
header .hd-wrap .nav-right ul li a{ width: 240px; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 4px; background: var(--color_btn);}
header .hd-wrap .nav-right ul li a b{ color: #000; font-size: 16px; margin-right: 10px; line-height: 1.1em; font-weight: 400; transition: 0.4s;}
header .hd-wrap .nav-right ul li a span{ color: #000; font-size: 10px; line-height: 1.1em; font-weight: 400; transition: 0.4s;}
@media screen and (min-width: 600px) {
header .hd-wrap .nav-left nav dl dd a:hover{ text-decoration: underline; color: #FFE474;}
header .hd-wrap .nav-left nav.hNav-end ul li a:hover{ text-decoration: underline; color: #FFE474;}
header .hd-wrap .nav-right ul li a:hover{ background: var(--cursor_color3);}
header .hd-wrap .nav-right ul li a:hover *{ color: #fff;}
}
@media screen and (max-width: 1150px) {
header .hd-wrap .nav-left nav dl dd a{ font-size: 12px;}

}
@media screen and (max-width: 1000px) {
header .hd-wrap .nav-left nav dl{ width: 24%; margin: 20px 0.5% 10px; padding: 0 10px 20px;}
header .hd-wrap .nav-left nav dl dt b{ font-size: 16px;}
}

@media screen and (max-width: 900px) {
header .hd-wrap{ min-height: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
header .hd-wrap .nav-left p.logo{ width: 100%; display: block; text-align: left;}
header .hd-wrap .nav-left p.logo img{ width: 120px; height: auto; margin: 0 20px 50px;}
header .hd-wrap .nav-left nav dl{ width: 96%; display: flex; flex-wrap: wrap; margin: 10px 2%  30px; border: solid 1px rgba(255,255,255,.4);}
header .hd-wrap .nav-left nav dl dt{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 6px 10px; margin-bottom: 0; margin-top: -18px; border-bottom: none;}
header .hd-wrap .nav-left nav dl dt b{ font-size: 20px; padding: 0 4px;}
header .hd-wrap .nav-left nav dl dt span{ background: #303030; font-size: 12px; font-weight: 200; padding: 0 4px 3px;}
header .hd-wrap .nav-left nav dl dd{ width: 48%; margin: 5px 1%;}
/**/
header .hd-wrap .nav-right ul li{ width: 100%; display: flex; margin-right: 0; padding-bottom: 40px; justify-content: center;}
header .hd-wrap .nav-right ul li.pclogo{ display: none;}
header .hd-wrap .nav-right ul li a{ width: 80%; max-width: 400px; height: 60px;}
/**/
header .hd-wrap .nav-left nav.hNav-end { flex-direction: column-reverse;}
header .hd-wrap .nav-left nav.hNav-end p{ padding:5px 20px;}
header .hd-wrap .nav-left nav.hNav-end ul{ }
header .hd-wrap .nav-left nav.hNav-end ul li{ margin:4px 5px; padding: 0;}
header .hd-wrap .nav-left nav.hNav-end ul li::after{ display: none;}
header .hd-wrap .nav-left nav.hNav-end ul li a{ padding: 2px 15px; border: solid 1px #777; color: #ccc; border-radius: 4px;}

}
@media screen and (max-width: 600px) {
header .hd-wrap{ padding:30px 0%;}
header .hd-wrap .nav-left nav dl{ padding: 0 0 10px;}
header .hd-wrap .nav-left nav dl dd{ margin: 0 1%;}
header .hd-wrap .nav-left nav dl dd a{ width: 100%; line-height: 40px; padding: 0; font-size: 3.2vw; letter-spacing: 0;}
header .hd-wrap .nav-left nav dl dt b{ font-size: 3.6vw; font-weight: 200; padding-right: 2%;}
}


/*==============================================
  footer
================================================*/
footer{ width: 100%; display: flex; background: #fff; flex-direction: column; justify-content: flex-start; align-items: flex-start; box-shadow: 0 0 0 10px rgba(0,0,0,.1) inset; padding: 10px; position: relative; z-index: 2;}
footer .fWrap{ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer .fWrap.f1{ width: 100%; min-height: 110vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0vh 5% 5vh;}
footer .fWrap.f1 .footerDiv{ padding:50px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: solid 1px #ccc; position: relative; transition: 3.0s;}
footer .fWrap.f1 .footerDiv:hover{ border: solid 1px #fff; }
footer .fWrap.f1 .footerDiv::before, 
footer .fWrap.f1 .footerDiv::after, 
footer .fWrap.f1 .footerDiv h2::before, 
footer .fWrap.f1 .footerDiv h2::after{ background: #444; content: ""; position: absolute; transition: 2.8s;}
footer .fWrap.f1 .footerDiv::before,  
footer .fWrap.f1 .footerDiv::after{ width: 1px; height: 0;}
footer .fWrap.f1 .footerDiv h2::before, 
footer .fWrap.f1 .footerDiv h2::after{ width: 0; height: 1px;}
footer .fWrap.f1 .footerDiv::before{ left: -1px; bottom: 0;} 
footer .fWrap.f1 .footerDiv::after{ right: -1px; top: 0;}
footer .fWrap.f1 .footerDiv h2::before{ left: 0; top: -1px;}
footer .fWrap.f1 .footerDiv h2::after{ right: 0; bottom: -1px;}
footer .fWrap.f1 .footerDiv.setView::before,  
footer .fWrap.f1 .footerDiv.setView::after{ height: 100%;}
footer .fWrap.f1 .footerDiv.setView h2::before, 
footer .fWrap.f1 .footerDiv.setView h2::after{ width: 100%;}
footer .fWrap.f1 .footerDiv.setView:hover::before,  
footer .fWrap.f1 .footerDiv.setView:hover::after{ height: 0%;}
footer .fWrap.f1 .footerDiv.setView:hover h2::before, 
footer .fWrap.f1 .footerDiv.setView:hover h2::after{ width: 0%;}
/**/
footer .fWrap.f1 .footerDiv h2{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 30px;}
footer .fWrap.f1 .footerDiv h2 img{ width: 120px; margin: 5px 0;}
footer .fWrap.f1 .footerDiv h2 span{ color: #000; font-size: 11px;}
footer .fWrap.f1 .footerDiv .txt{ display: flex; flex-direction: column; align-items: center;}
footer .fWrap.f1 .footerDiv .txt .links{ display: flex; justify-content: center; align-items: center; margin: 10px 0; color: #ccc; font-size: 8px;}
footer .fWrap.f1 .footerDiv .txt .links a{ height: 14px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden; margin: 0 4px; position: relative;}
footer .fWrap.f1 .footerDiv .txt .links a .eng{ display: block; height: 14px; letter-spacing: 0; font-size: 10px; color: #555; text-decoration: none; transition: 0.4s; text-align: center;}
footer .fWrap.f1 .footerDiv .txt .links a .jp{ display: block; height: 14px; font-size: 9px; text-decoration: none; letter-spacing: 0; color: #000; text-align: center;}
footer .fWrap.f1 .footerDiv .txt .links a:hover .eng{ margin-top: -14px; }
footer .fWrap.f1 .footerDiv .txt .address{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer .fWrap.f1 .footerDiv .txt .address span{ display: block; font-size: 10px; color: #222; font-weight: 200;} 
footer .fWrap.f1 .footerDiv .formBtn{ display: flex; justify-content: center; margin-top: 35px;}
footer .fWrap.f1 .footerDiv .formBtn a{ min-width: 200px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 2px; background: #000; color: #fff; font-size: 12px;}
footer .fWrap.f1 .footerDiv .formBtn a:hover{ background: var(--color1);}
footer .fWrap.f2{ width: 100%; display: flex; flex-direction: column;}
footer .fWrap.f2 p{ width: 100%; padding:20px 10px; display: block; line-height: 1.1em; font-size: 10px; font-weight: 300; color: #555; border-top: double 3px #ddd;}
@media screen and (max-width: 600px) {
footer { min-height: 100vh; justify-content: space-between;}
footer .fWrap.f1{ min-height: auto; flex: 1; padding: 5vh 3%;}
footer .fWrap.f1 .footerDiv .txt .links{ flex-direction: column; align-items: flex-start; margin: 2px 0 15px;}
footer .fWrap.f1 .footerDiv .txt .links a{ width: 100%; display: flex; flex-direction:row; align-items: center; height: 20px;}
footer .fWrap.f1 .footerDiv .txt .links a::before{ content: "・";}
footer .fWrap.f1 .footerDiv .txt .links a .eng{ height: auto; font-size: 11px;}
footer .fWrap.f1 .footerDiv .txt .links a .jp{ display: none;}
footer .fWrap.f1 .footerDiv .txt .links a:hover .eng{ margin-top: 0; }
footer .fWrap.f1 .footerDiv .formBtn a{ height: 60px;}
footer .fWrap.f1 .footerDiv .txt .address span{ font-weight: 400;}
}

/*================================
breadcrumbs pパンくず
===============================*/
#breadcrumbs { overflow-x: auto; overflow-y:hidden; flex-direction: row; justify-content: flex-start;}
#breadcrumbs ul{ padding: 5px 0 5px 10px; display: flex; flex-direction: row; align-items: flex-end;}
#breadcrumbs ul li{ display: flex; flex-direction: row; align-items: center;}
#breadcrumbs ul li::after{ content: ">"; margin:0 5px; font-size: 9px; color: #777; line-height: 1em;}
#breadcrumbs ul li:last-child::after{ content: ""; display: none;}
#breadcrumbs ul li a{ display: block; padding: 1px 5px;}
#breadcrumbs ul li a span{ display: block; font-size: 10px; color: #555; text-decoration: none;}
#breadcrumbs ul li:last-child a span{ font-weight: bold; color: #111;}
#breadcrumbs ul li a:hover span{ text-decoration: underline; color: #000;}


/*==============================================
 purpose_links
================================================*/
dl.purpose_links{ width: 94%; display: flex; flex-direction: row; align-items: center; border: solid 1px #ccc; border-radius: 4px; padding: 20px 30px; margin: 0 3%;}
dl.purpose_links dt{ margin-right:30px; display: flex; flex-direction: column; justify-content: center;}
dl.purpose_links dt .jp{ font-size: 11px; border-top: dashed 1px #777; padding: 5px 4px 0;}
dl.purpose_links dt .eng{ font-size: 14px; padding: 0 4px;}
dl.purpose_links dd{ flex: 1; display: flex; flex-wrap: wrap;}
dl.purpose_links dd > a{ display: flex; justify-content: flex-start; align-items: center; font-size: 11px; color: #666; margin: 4px; padding: 3px 10px 5px; border-radius: 2px; line-height: 1em; position: relative; overflow: hidden; border: solid 1px #fff; white-space: nowrap;}
dl.purpose_links dd > a::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #eee; transition: 0.4s; z-index: -1;}
dl.purpose_links dd > a:hover::after{ width: 0;}
dl.purpose_links dd > a:hover{ border: solid 1px #111; color: #111;}
dl.purpose_links dd > a.now{ background: #555; color: #ccc; pointer-events: none;}
dl.purpose_links dd > a.now::after{ display: none;}
dl.purpose_links dd span{ width: 100%; display: flex; justify-content: flex-start; margin-top: 5px; padding-top: 8px; border-top: dotted 1px #ccc;}
dl.purpose_links dd span a{ display: flex; justify-content: center; align-items: center; background:#fff; padding:6px 10px; border-radius: 2px; line-height: 1em; color: #555; border: solid 1px #ccc; font-size: 12px;}
dl.purpose_links dd span a:hover{ background: var(--cursor_color3); border: solid 1px var(--cursor_color3); color: #fff;}
/**/
body.top dl.purpose_links{ border: none; border-radius: 4px; padding: 0;}
body.top dl.purpose_links dd span{ display: none;}
body.top dl.purpose_links dd > a{ display: flex; align-items: center; justify-content: center;  min-height: 36px; padding: 4px 20px; border-radius: 30px; font-size: 13px; font-weight: 500; color: #555; border: solid 1px #555; background: #fff;  margin: 0 20px 10px 0;}
body.top dl.purpose_links dd > a::before{ content: "#"; font-size: 16px; font-weight: 200; margin: -2px 2px 0 0;}
body.top dl.purpose_links dd > a:hover{ background: var(--color1); color: #fff;}

@media screen and (max-width: 1100px) {
body.top dl.purpose_links dd > a{ padding: 5px 8px; margin: 0 10px 15px 0;}
}

@media screen and (max-width: 500px) {
dl.purpose_links dd{ flex-direction: column; align-items: flex-start;}
dl.purpose_links dt .eng{ font-size: 3.6vw;}
dl.purpose_links dt .jp{ font-size: 2.0vw; text-align: center;}
dl.purpose_links dd > a{ min-height: 26px;}
dl.purpose_links dd span a {font-size: 3.4vw; letter-spacing: 0; padding:0; width: 100%; height: 40px;}
body.top dl.purpose_links dd > a{ padding:8px 10px; font-size: 12px; color: #111; border-radius: 4px;}
}

/*==============================================
 service_links
================================================*/
dl.service_links{ width: 94%; display: flex; flex-direction: row; align-items: center; border: solid 1px #ccc; border-radius: 4px; padding: 20px 30px; margin: 0 3%;}
dl.service_links dt{ margin-right:30px; display: flex; flex-direction: column; justify-content: center;}
dl.service_links dt .jp{ font-size: 11px; border-top: dashed 1px #777; padding: 5px 4px 0;}
dl.service_links dt .eng{ font-size: 14px; padding: 0 4px;}
dl.service_links dd{ flex: 1; display: flex; flex-wrap: wrap;}
dl.service_links dd > a{ display: flex; justify-content: flex-start; align-items: center; font-size: 11px; color: #666; margin: 4px; padding: 3px 10px 5px; border-radius: 2px; line-height: 1em; position: relative; overflow: hidden; border: solid 1px #fff; white-space: nowrap;}
dl.service_links dd > a::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #eee; transition: 0.4s; z-index: -1;}
dl.service_links dd > a:hover::after{ width: 0;}
dl.service_links dd > a:hover{ border: solid 1px #111; color: #111;}
dl.service_links dd > a.now{ background: #555; color: #ccc; pointer-events: none;}
dl.service_links dd > a.now::after{ display: none;}
dl.service_links dd span{ width: 100%; display: flex; justify-content: flex-start; margin-top: 5px; padding-top: 8px; border-top: dotted 1px #ccc;}
dl.service_links dd span a{ display: flex; justify-content: center; align-items: center; background:#fff; padding:6px 10px; border-radius: 2px; line-height: 1em; color: #555; border: solid 1px #ccc; font-size: 12px;}
dl.service_links dd span a:hover{ background: var(--cursor_color3); border: solid 1px var(--cursor_color3); color: #fff;}
/**/
body.top dl.service_links{ border: none; border-radius: 4px; padding: 0;}
body.top dl.service_links dd span{ display: none;}
body.top dl.service_links dd > a{ display: flex; align-items: center; justify-content: center;  min-height: 36px; padding: 4px 20px; border-radius: 30px; font-size: 13px; font-weight: 500; color: #555; border: solid 1px #555; background: #fff;  margin: 0 20px 10px 0;}
body.top dl.service_links dd > a::before{ content: "#"; font-size: 16px; font-weight: 200; margin: -2px 2px 0 0;}
body.top dl.service_links dd > a:hover{ background: var(--color1); color: #fff;}

@media screen and (max-width: 1100px) {
body.top dl.service_links dd > a{ padding: 5px 8px; margin: 0 10px 15px 0;}
}

@media screen and (max-width: 500px) {
dl.service_links dd{ flex-direction: column; align-items: flex-start;}
dl.service_links dt .eng{ font-size: 3.6vw;}
dl.service_links dt .jp{ font-size: 2.0vw; text-align: center;}
dl.service_links dd > a{ min-height: 26px;}
dl.service_links dd span a {font-size: 3.4vw; letter-spacing: 0; padding:0; width: 100%; height: 40px;}
body.top dl.service_links dd > a{ padding:8px 10px; font-size: 12px; color: #111; border-radius: 4px;}
}




/*==============================================
 pageup
================================================*/
.pageup{ width: 100px; height: 100px; position:fixed; right: -20px; bottom: 10px; z-index: 30000; transition: 0.5s; transform: scale(0,0);}
.scroll2 .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;}
}

/*==============================================
  loading
================================================*/
.clBody{ width: 100%; height: 100%; overflow: hidden; position: fixed;}
.loadWrap{ width: 100%; height: 100%; position: fixed; z-index: 100000100000; right:0; top: 0; background: #fff; display: block;}

/***************************************************
 * Generated by SVG Artista on 12/7/2020, 11:25:09 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
/**/
.logo_cls-1, .logo_cls-2 {stroke: #000;fill-rule: evenodd;}
.logo_cls-1 {stroke-width: 1px;}
.logo_cls-2 {fill: none;stroke-width: 4px;}
.loadWrap .logo_open{ width: 30%; height: auto; max-width: 200px; position: fixed; left: 50%; top: 50%; margin: -21px 0 0 -130px;}
@media screen and (max-width: 600px) {
.loadWrap .logo_open{ width: 40%; max-width:900px; left: 30%; margin: -30px 0 0;}
}
.logo_open .svg-elem-1 {
  stroke-dashoffset: 1909.719970703125px;
  stroke-dasharray: 1909.719970703125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
  fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
  fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}
.opBody .logo_open .svg-elem-1 {
  stroke-dashoffset: 0;
  fill: rgb(0, 0, 0);
}
.logo_open .svg-elem-2 {
  stroke-dashoffset: 96.2813720703125px;
  stroke-dasharray: 96.2813720703125px;
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
  fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
  fill 0.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}
.opBody .logo_open .svg-elem-2 {stroke-dashoffset: 0;}


/*================================
ページリンク 次へ・一覧・前へ
===================================*/
/*次へボタン*/
#blog-post-bottom{ padding: 0 0 60px; display: flex; justify-content: center;}
#blog-post-bottom .inner{ max-width: 800px; padding: 0 4%;}
#blog-post-bottom #blog_page_link ul{ display: flex; flex-direction: row; justify-content: space-between;}
#blog-post-bottom #blog_page_link ul li{ display: block; width: 20%; margin: 0 3%; }
#blog-post-bottom #blog_page_link ul li.list{ width: 38%;}
#blog-post-bottom #blog_page_link ul li > *{ line-height: 50px; text-align: center; display: block; font-size: 13px; border-radius: 4px;}
#blog-post-bottom #blog_page_link ul li a{ width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; border: solid 1px #555; text-decoration: none; color: #111; position: relative;}
#blog-post-bottom #blog_page_link ul li a span{ font-size: 12px;}
#blog-post-bottom #blog_page_link ul li a:hover{ background: #f0f0f0; border: solid 1px 000; box-shadow: 0 0 0 2px #000;}
#blog-post-bottom #blog_page_link ul li > span{ background: #e5e5e5; color: #888;}
/*icon*/
#blog-post-bottom #blog_page_link ul li.list a span, 
#blog-post-bottom #blog_page_link ul li.list a span::before, 
#blog-post-bottom #blog_page_link ul li.list a span::after{ content: ""; display: block; width: 20px; height: 2px; position: absolute; background: #111; transition: 0.3s;}
#blog-post-bottom #blog_page_link ul li.list a span{ margin-top: -1px; left: 15%; top: 50%;}
#blog-post-bottom #blog_page_link ul li.list a span::before{ margin-top: -6px; left: 0; top: 0;}
#blog-post-bottom #blog_page_link ul li.list a span::after{ margin-top: 6px; left: 0; top: 0;}
#blog-post-bottom #blog_page_link ul li.list a:hover span::before{ margin-top: -4px;}
#blog-post-bottom #blog_page_link ul li.list a:hover span::after{ margin-top: 4px;}
#blog-post-bottom #blog_page_link ul li a::before{ width: 10px; height: 10px; display: block; content: ""; position: absolute; border-bottom: solid 3px #111; top: 50%; margin-top: -7px; transition: 0.4s;}
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::before{ left: 8%; border-left: solid 3px #111; transform:rotate(45deg);}
#blog-post-bottom #blog_page_link ul li:nth-child(1) a:hover::before{ left:6%;}
#blog-post-bottom #blog_page_link ul li:nth-child(2) a::before{ display: none;}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::before{ right: 5%; border-right: solid 3px #111; transform:rotate(-45deg);}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a:hover::before{ right:5%;}
@media screen and (max-width:800px) {
#blog-post-bottom #blog_page_link ul li{width: 28%; margin: 0;}
#blog-post-bottom #blog_page_link ul li.list a span{ left: 8%;}
}
@media screen and (max-width:600px) {
#blog-post-bottom{ padding: 0 0 30px;}

#blog-post-bottom #blog_page_link ul li:nth-child(1) span{ padding-left: 12%;}
#blog-post-bottom #blog_page_link ul li:nth-child(3) span{ padding-right: 12%;}
#blog-post-bottom #blog_page_link ul li a::before{ width: 8px; height: 8px; margin-top: -5px;}
#blog-post-bottom #blog_page_link ul li{width: 28%; margin: 0;}
#blog-post-bottom #blog_page_link ul li.list a{ padding-left: 8%;}
#blog-post-bottom #blog_page_link ul li a span, 
#blog-post-bottom #blog_page_link ul li.list a, 
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::after, 
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ font-size: 3.0vw; letter-spacing: 0;}
/*
#blog-post-bottom #blog_page_link ul li:nth-child(1) a::after{ content: "前へ";}
#blog-post-bottom #blog_page_link ul li:nth-child(3) a::after{ content: "次へ";}
*/
}
/*==============================================
 ページャー
================================================*/
.pager { display: flex; flex-direction: row; align-items: center; justify-content: center;}
ul.page-numbers{ display: flex; direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 20px 0;}
ul.page-numbers li{ margin: 8px;}
ul.page-numbers li span{ min-width: 40px; height: 50px; border: solid 1px #ccc; display: block; line-height: 50px;text-align: center; border-radius: 4px; background: #fff; transition: 0.2s; margin: 0 5px;}
ul.page-numbers li a{ min-width: 40px; height: 50px; padding: 0 5px; display: block; line-height: 50px; text-align: center; background: #fff; border: solid 1px #ddd; box-shadow: 0 0 0 rgba(0,0,0,.2); border-radius: 4px; color: #555;}
ul.page-numbers li > span{ background: var(--color1); color: #fff; border: solid 1px var(--color1);}
ul.page-numbers li a:hover{ background: #666; color: #fff; border: solid 1px #666; box-shadow: 0 4px 6px rgba(0,0,0,.2);}
ul.page-numbers li.dot{ display: flex; align-items: flex-end; width: auto;}
ul.page-numbers li.prev span, 
ul.page-numbers li.next span{ width: 80px;}
ul.page-numbers li.prev > span, 
ul.page-numbers li.next > span{ background:#e5e5e5; color: #999; border: solid 1px #ccc;}

@media screen and (max-width: 850px) {
ul.page-numbers li{ margin: 5px;}
ul.page-numbers li span{ min-width: 34px; margin: 0 ;}
ul.page-numbers li a{ min-width: 34px; font-size: 14px; font-weight: bold;  box-shadow: 0 2px 4px rgba(0,0,0,.15); }
}
@media screen and (max-width: 650px) {
ul.page-numbers{ justify-content: flex-start;}
ul.page-numbers li span, 
ul.page-numbers li a{ height: 48px; line-height: 48px;}
}

/*-------------------------
カテゴリー一覧*/
.blog_post_list h2{ font-size: 14px !important;}
.blog_post_list h2 a{ font-size: 12px !important;}
.blog_post_list h2 a:hover{ text-decoration: underline;}
.blog_post_list h2{ padding: 20px 10px !important; color: #000 !important; border: none!important; border-top: solid 1px #000 !important; font-weight: bold !important; background: none !important; border-radius: 0 !important;} 






































/*===================
 404
=====================*/
.page404 footer{ display: flex; flex-direction: column-reverse;}
#not404{ padding-top: 80px;}
#not404 h1{ display: flex; justify-content: center;}
#not404 h1 b{ display: block; text-align: center; padding:15px 30px; border: solid 2px #111; border-radius: 6px;}
#not404 h1 b br{ display: none;}
#not404 p{ display: block; margin-top: 20px; font-size: 18px;}
#not404 p img{ width: 160px; margin: 20px 0 20px -10px; display: none;}
@media screen and (max-width: 850px) {
#not404{ padding-top: 40px;}
#not404 p img{ display: block; margin: 50px auto;}
}
@media screen and (max-width: 650px) {
#not404 p img{ margin: 30px auto;}
#not404 h1 b{ font-size: 5.0vw; line-height: 1.4em;}
#not404 h1 b br{ display: block;}
#not404 p{ font-size: 3.8vw;}

}
/**/
#head-title{ display: none;}

/*--------------------
---------------------*/
.ulBox{ width: 100%; display: flex; flex-direction: column;}
.ulBox::-webkit-scrollbar { width: 6px; }
.ulBox::-webkit-scrollbar-thumb{ background: #222; border-radius: 5px;}
.ulBox::-webkit-scrollbar-track-piece {background: #eee;}
.ulBox ul, 
.ulBox ul li{ width: 100%; display: block; position: relative; z-index: 1;}
.ulBox ul li:hover{ z-index: 10;}
.ulBox ul li a{ display: flex; justify-content: flex-start; align-items: center; padding:15px 10px; border-top: solid 1px #e5e5e5; background: #fff; border-radius: 0;}
.ulBox ul li a .date{ width: 155px; display: flex; align-items: center; justify-content: space-between; padding-right: 15px;}
.ulBox ul li a .date b{ font-size: 12px; letter-spacing: 0; font-weight: 400; color: #222; word-break: keep-all;}
.ulBox ul li a .date .cate{ padding: 2px 4px 1px; text-align: center; letter-spacing: 0; font-size: 8px; border: solid 1px #aaa; color: #777; border-radius: 1px; word-break: keep-all;}
.ulBox ul li a.c-cate .date{ width: 100px;}
.ulBox ul li a.c-cate .date .cate{ width: 100%;}


.ulBox ul li a .txt{ flex: 1;  font-size: 12px; line-height: 1.3em;}
@media screen and (min-width: 851px){
.ulBox ul:hover li a{ opacity: 0.3;}
.ulBox ul li a:hover{ opacity: 1; border-top: solid 1px #fff; box-shadow: 0 8px 15px rgba(0,0,0,.3); border-radius: 6px;}
}
@media screen and (max-width: 800px){
.ulBox{ padding: 10px 20px 0 0;}
.ulBox ul li a{ padding: 15px; align-items: flex-start;}
.ulBox ul li a.c-cate{flex-direction: column;}
.ulBox ul li a .date{ width: auto; padding-right: 15px;}
.ulBox ul li a .date b{ color: #777;}
.ulBox ul li a .date .cate{ display: block; margin-bottom:5px;}

.ulBox ul li a .date.c-cate .cate{ display: none;}
}