/***************************************************
information
	filename : sys_common.css;
***************************************************/

/******* BASE *******/
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,address{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0; vertical-align:top;}
img.lp {border:1px solid var(--app-main-brd);}
h2,h3,h4,h5,h6{font-size:100%;text-align:left;}
fieldset {border:none;}
section, nav, article, aside, hgroup, header, footer, figure, figcaption, details, fieldset {display: block;}

html {margin: 0;padding: 0;box-sizing: border-box;font-size: var(--font-html);-webkit-text-size-adjust: 100%;}
*, *:before, *:after {box-sizing: inherit;}
body {
	margin: 0;
	padding: 0;
	text-align: left;
	word-wrap: break-word;
	overflow-wrap: break-word;
	color: var(--body-txt); /* 基本テキスト */
	font-size: var(--font-body); /* bodyフォント */
	background: var(--body-bg); /* body背景色 */
	font-family: var(--font-face); /* bodyフォントフェイス */
}
body.popup {
	background: var(--body-popup-bg); /* body-popup-背景色 */
}
/****** SYS ******/
.sp_only {display: none;}
.pc_only {display: block;}
.nowrap {white-space: nowrap;}
.fadebox {opacity: 0;}
.statement-tab { display: none;}
#colorbox {z-index: 30000 !important;}

/* SEO H1対策 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
	white-space: nowrap;
}
/* ========== COMMON PARTS ========== */
.LayoutL {float:left;}
.LayoutR {float:right;}
.clear_fix:after {
	content: "";
	display: block;
	clear: both;
	height: 0px;
	overflow: hidden;
}
/****** LINK ******/
.mouseOver:hover {filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
.link_box_pos {position:relative;}
.link_box {position:relative;width:100%;padding:0;margin:0px auto;}
.link_box a {position:absolute;top:0;left:0;width:100%;height:100%;text-indent:-99999px;}
.link_box a:hover {background-color: var(--linkbox-bg);filter: alpha(opacity=30);-moz-opacity:0.30;opacity:0.30;}

/******* TEXT SIZE *******/
.fs60 {font-size: 60px;}
.fs55 {font-size: 55px;}
.fs50 {font-size: 50px;}
.fs45 {font-size: 45px;}
.fs40 {font-size: 40px;}
.fs35 {font-size: 35px;}
.fs30 {font-size: 30px;}
.fs29 {font-size: 29px;}
.fs28 {font-size: 28px;}
.fs27 {font-size: 27px;}
.fs26 {font-size: 26px;}
.fs25 {font-size: 25px;}
.fs24 {font-size: 24px;}
.fs23 {font-size: 23px;}
.fs22 {font-size: 22px;}
.fs21 {font-size: 21px;}
.fs20 {font-size: 20px;}
.fs19 {font-size: 19px;}
.fs18 {font-size: 18px;}
.fs17 {font-size: 17px;}
.fs16 {font-size: 16px;}
.fs15 {font-size: 15px;}
.fs14 {font-size: 14px;}
.fs13 {font-size: 13px;}
.fs12 {font-size: 12px;}
.fs11 {font-size: 11px;}
.fs10 {font-size: 10px;}
.lh10 {line-height: 1em;}
.lh11 {line-height: 1.1em;}
.lh12 {line-height: 1.2em;}
.lh13 {line-height: 1.3em;}
.lh14 {line-height: 1.4em;}
.lh15 {line-height: 1.5em;}
.lh16 {line-height: 1.6em;}
.lh17 {line-height: 1.7em;}
.lh18 {line-height: 1.8em;}
.lh19 {line-height: 1.9em;}
.lh20 {line-height: 2em;}
.bold {font-weight: bold;}

/******* LAYOUT *******/
.lft {text-align: left;}
.cnt {text-align: center;}
.rgt {text-align: right;}
.vat {vertical-align:top;}
.vam {vertical-align:middle;}
.vab {vertical-align:bottom;}

/******* CONTROL *******/
.ofa {overflow: auto;}
.ofh {overflow: hidden;}
.prv {position:relative;}
.pab {position:absolute;}
.mgt2 {margin-top: 2px;}
.mgt3 {margin-top: 3px;}
.mgt4 {margin-top: 4px;}
.mgt5 {margin-top: 5px;}
.mgt6 {margin-top: 6px;}
.mgt7 {margin-top: 7px;}
.mgt10 {margin-top: 10px;}
.mgt15 {margin-top: 15px;}
.mgt20 {margin-top: 20px;}
.mgt25 {margin-top: 25px;}
.mgt30 {margin-top: 30px;}
.mgt35 {margin-top: 35px;}
.mgt40 {margin-top: 40px;}
.mgt45 {margin-top: 45px;}
.mgt50 {margin-top: 50px;}
.mgt55 {margin-top: 55px;}
.mgt60 {margin-top: 60px;}
.mgb5 {margin-bottom: 5px;}
.mgb10 {margin-bottom: 10px;}
.mgb15 {margin-bottom: 15px;}
.mgb20 {margin-bottom: 20px;}
.mgb25 {margin-bottom: 25px;}
.mgb30 {margin-bottom: 30px;}
.mgb35 {margin-bottom: 35px;}
.mgb40 {margin-bottom: 40px;}
.mgb45 {margin-bottom: 45px;}
.mgb50 {margin-bottom: 50px;}
.mgb55 {margin-bottom: 55px;}
.mgb60 {margin-bottom: 60px;}
.mgb100 {margin-bottom: 100px;}
.mgb150 {margin-bottom: 150px;}
.mgl5 {margin-left: 5px;}
.mgl10 {margin-left: 10px;}
.mgl15 {margin-left: 15px;}
.mgl20 {margin-left: 20px;}
.mgl25 {margin-left: 25px;}
.mgl30 {margin-left: 30px;}
.mgl-5 {margin-left: -5px;}
.mgl-10 {margin-left: -10px;}
.mgl-15 {margin-left: -15px;}
.mgl-20 {margin-left: -20px;}
.mglra {margin-left:auto;margin-right:auto;}
.pdg10 {padding:10px;}
.pdt2 {padding-top:2px;}
.pdt3 {padding-top:3px;}
.pdt4 {padding-top:4px;}
.pdt5 {padding-top:5px;}
.pdt10 {padding-top:10px;}
.pdb10 {padding-bottom:10px;}
.pdg20 {padding:20px;}
.pdt20 {padding-top:20px;}
.pdb20 {padding-bottom:20px;}
.pdtb10 {padding-top:10px;padding-bottom:10px;}
.pdtb20 {padding-top:20px;padding-bottom:20px;}
.pdlr5 {padding-left:5px;padding-right:5px;}
.pdlr10 {padding-left:10px;padding-right:10px;}
.pdlr20 {padding-left:20px;padding-right:20px;}

/******* LAYOUT SIZE *******/
.hlf60 {width:60%;}
.hlf70 {width:70%;}
.hlf80 {width:80%;}
.hlf90 {width:90%;}
.boxW400 {width:400px;}
.boxW420 {width:420px;}
.boxW450 {width:450px;}
.boxW500 {width:500px;}
.boxW550 {width:550px;}
.boxW600 {width:600px;}
.boxW650 {width:650px;}
.boxW700 {width:700px;}
.boxW750 {width:750px;}
.boxW800 {width:800px;}
.boxW850 {width:850px;}

/******* TABLE SIZE *******/
.size10,
th.size10,
td.size10 {width:10px;}
.size20,
th.size20,
td.size20 {width:20px;}
.size30,
th.size30,
td.size30 {width:30px;}
.size40,
th.size40,
td.size40 {width:40px;}
.size50,
th.size50,
td.size50 {width:50px;}
.size60,
th.size60,
td.size60 {width:60px;}
.size70,
th.size70,
td.size70 {width:70px;}
.size80,
th.size80,
td.size80 {width:80px;}
.size90,
th.size90,
td.size90 {width:90px;}
.size100,
th.size100,
td.size100 {width:100px;}
.size110,
th.size110,
td.size110 {width:110px;}
.size120,
th.size120,
td.size120 {width:120px;}
.size130,
th.size130,
td.size130 {width:130px;}
.size140,
th.size140,
td.size140 {width:140px;}
.size150,
th.size150,
td.size150 {width:150px;}
.size160,
th.size160,
td.size160 {width:160px;}
.size170,
th.size170,
td.size170 {width:170px;}
.size180,
th.size180,
td.size180 {width:180px;}
.size190,
th.size190,
td.size190 {width:190px;}
.size200,
th.size200,
td.size200 {width:200px;}
th.size210,
td.size210 {width:210px;}
th.size220,
td.size220 {width:220px;}
th.size230,
td.size230 {width:230px;}
th.size240,
td.size240 {width:240px;}
.size250,
th.size250,
td.size250 {width:250px;}
th.size260,
td.size260 {width:260px;}
th.size270,
td.size270 {width:270px;}
th.size280,
td.size280 {width:280px;}
th.size290,
td.size290 {width:290px;}
.size300,
th.size300,
td.size300 {width:300px;}
.size350,
th.size350,
td.size350 {width:350px;}
.size400,
th.size400,
td.size400 {width:400px;}
.size450,
th.size450,
td.size450 {width:450px;}
.size500,
th.size500,
td.size500 {width:500px;}
.size50pc,
th.size50pc,
td.size50pc {width:50%;}

/**** LIST STYLE ****/
.list-disk-ul {margin-left: 2.0rem;}
.list-disk-ol {margin-left: 2.0rem;}
.list-disk-ul li {list-style: disc;margin-top: 0.5rem;}
.list-disk-ol li {list-style: decimal;margin-top: 0.5rem;}

/**** LAYOUT BOX ****/
.tpl-contents-block {}
.tpl-contents-block-inn h2,
.tpl-contents-block-inn h3 {}
.tpl-contents-block-inn .txt {}
.tpl-contents-block-inn .cap {}
.tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image{
	position: relative;
	overflow: hidden;
	width: 100%;
}
.liimgY .tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image{padding-top: 60%;}
.liimgT .tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image{padding-top: 90%;}
.tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image a,
.ListType4 .tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image{display: flex;justify-content: center;align-items: center;}
.tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image a{height: 100%;}
.tpl-contents-block [class*="tpl-flexcolumn"] .column figure.image img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tpl-contents-block-type01 .tpl-contents-block-inn {display:-webkit-box;display:-moz-box;display:-ms-box;display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.tpl-contents-block.tpl-contents-block-type01 section {padding-bottom: 1.5rem;margin-bottom: 0;position: relative;}

/* 各カラム */
.tpl-contents-block .tpl-contents-block-inn{display:flex;width: 100%;gap: 1em 1em;}
.tpl-contents-block [class^="tpl-flexcolumn"] .column {float: none;margin:0;}
.tpl-contents-block [class^="tpl-flexcolumn"] .column:not([class^="column col"]){
  /* padding-right: 2em; */
  flex-shrink:0;
}
/*.ListType1 .tpl-contents-block .tpl-flexcolumn1 .column:not([class^="column col"]),
.tpl-contents-block .tpl-flexcolumn2 .column:not([class^="column col"]):nth-child(2n),
.tpl-contents-block .tpl-flexcolumn3 .column:not([class^="column col"]):nth-child(3n),
.tpl-contents-block .tpl-flexcolumn4 .column:not([class^="column col"]):nth-child(4n),
.tpl-contents-block .tpl-flexcolumn5 .column:not([class^="column col"]):nth-child(5n),
.tpl-contents-block .tpl-flexcolumn6 .column:not([class^="column col"]):nth-child(6n),
.tpl-contents-block .tpl-flexcoluamn7 .column:not([class^="column col"]):nth-child(7n),
.tpl-contents-block .tpl-flexcolumn8 .column:not([class^="column col"]):nth-child(8n),
.tpl-contents-block .tpl-flexcolumn9 .column:not([class^="column col"]):nth-child(9n),
.tpl-contents-block .tpl-flexcolumn10 .column:not([class^="column col"]):nth-child(10n){margin-right:0;}
*/
.tpl-contents-block .tpl-flexcolumn1  .column:not([class^="column col"]){width: 100%;}
.pcview .ListType2 .tpl-contents-block .tpl-flexcolumn0  .column:not([class^="column col"]),
.pcview .ListType2 .tpl-contents-block .tpl-flexcolumn1  .column:not([class^="column col"]),
.pcview .ListType4 .tpl-contents-block .tpl-flexcolumn0  .column:not([class^="column col"]),
.pcview .ListType4 .tpl-contents-block .tpl-flexcolumn1  .column:not([class^="column col"]),
.tpl-contents-block .tpl-flexcolumn2  .column:not([class^="column col"]){width: calc((100% - 1em) / 2 );}
.tpl-contents-block .tpl-flexcolumn3  .column:not([class^="column col"]){width: calc((100% - 2em) / 3 );}
.tpl-contents-block .tpl-flexcolumn4  .column:not([class^="column col"]){width: calc((100% - 3em) / 4 );}
.tpl-contents-block .tpl-flexcolumn5  .column:not([class^="column col"]){width: calc((100% - 4em) / 5 );}
.tpl-contents-block .tpl-flexcolumn6  .column:not([class^="column col"]){width: calc((100% - 5em) / 6 );}
.tpl-contents-block .tpl-flexcolumn7  .column:not([class^="column col"]){width: calc((100% - 6em) / 7 );}
.tpl-contents-block .tpl-flexcolumn8  .column:not([class^="column col"]){width: calc((100% - 7em) / 8 );}
.tpl-contents-block .tpl-flexcolumn9  .column:not([class^="column col"]){width: calc((100% - 8em) / 9 );}
.tpl-contents-block .tpl-flexcolumn10 .column:not([class^="column col"]){width: calc((100% - 9em) / 10);}

/* スライダー指定 */
.sldYblockArea .tpl-contents-block [class^="tpl-flexcolumn"] .column {float: left;margin-left:0.5rem;margin-right:0.5rem;}
.ListBox.ListType2.sldYblockArea .clmDetail,
.ListBox.ListType4.sldYblockArea .clmDetail {margin: 0 0.5rem;border-bottom: none;}
.ListBox.ListType3.sldYblockArea dl.clmDetail,
.ListBox.ListType5.sldYblockArea .clmDetail {margin: 0 1.0rem;padding-bottom: 1.0rem;border-bottom: none;}
.sldTblock .slick-arrow{
	width: initial!important;
	height: initial!important;
	z-index:2!important;
	transform: rotate(90deg);
	top: initial;
	left: initial!important;
	right: 0!important;
}
.sldTblock .slick-arrow:before{ font-size: 50px; }
.sldTblock .slick-prev{ top: 0; }
.sldTblock .slick-next{ bottom: 0; }
.sldTblock .slick-dots{width: 50px;right: 0;bottom: initial;top: 50%;transform: translateY(-50%);}

/**** hr ****/
.tpl-contents-block hr {margin: 4.0rem auto;height: 0.1rem;border: 0;}
.sideClnD .tpl-contents-block hr {margin: 0.5rem auto 1.0rem auto;}
.tpl-contents-block hr.dot {background: var(--app-li-hr-brd);}/* ドットボーダー指定 */

/****** figure ******/
figure {position: relative;overflow: hidden;}

figcaption.mouseAnimeType01,
figcaption.mouseAnimeType02,
figcaption.mouseAnimeType03,
figcaption.mouseAnimeType04,
figcaption.mouseAnimeType05,
figcaption.mouseAnimeType06,
figcaption.mouseAnimeType07,
figcaption.mouseAnimeType08 {
	z-index: 2;
	width: 100%;
	height: 100%;
	background: var(--app-li-figcaption-bg); /* 背景色*/
	-webkit-transition: .3s;
	transition: .3s;
}
figcaption.mouseAnimeType01 {position: absolute;top: 0;left: 0;opacity: 0;}
figure:hover figcaption.mouseAnimeType01 {opacity: 1;}
figcaption.mouseAnimeType02 {position: absolute;top: -100%;left: 0;opacity: 1;overflow: hidden;}
figure:hover figcaption.mouseAnimeType02 {top: 0;left: 0;}
figcaption.mouseAnimeType03 {position: absolute;top: 0;left: -100%;opacity: 1;}
figure:hover figcaption.mouseAnimeType03 {top: 0;left: 0;}
figcaption.mouseAnimeType04 {position: absolute;top: 0;left: 0;-webkit-transform: rotate(90deg) scale(0);transform: rotate(90deg) scale(0);opacity: 0;}
figure:hover figcaption.mouseAnimeType04 {-webkit-transform: rotate(360deg) scale(1);transform: rotate(360deg) scale(1);opacity: 1;}
figcaption.mouseAnimeType05 {position: absolute;top: 0;left: 0;-webkit-transform: rotate(90deg) scale(3);transform: rotate(90deg) scale(3);opacity: 0;}
figure:hover figcaption.mouseAnimeType05 {-webkit-transform: rotate(360deg) scale(1);transform: rotate(360deg) scale(1);opacity: 1;}
figcaption.mouseAnimeType06 {position: absolute;top: 0;left: 0;-webkit-transform: rotateX(-180deg);transform: rotateX(-180deg);-webkit-transition: .5s;transition: .5s;opacity: 0;}
figure:hover figcaption.mouseAnimeType06 {-webkit-transform: rotateX(0);transform: rotateX(0);opacity: 1;}
figcaption.mouseAnimeType07 {position: absolute;top: 0;left: 0;-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-webkit-transition: .5s;transition: .5s;opacity: 0;}
figure:hover figcaption.mouseAnimeType07 {-webkit-transform: rotateY(0);transform: rotateY(0);opacity: 1;}
figcaption.mouseAnimeType08 {position: absolute;bottom: -60px;left: 0;height: 6.0rem;}
figure:hover figcaption.mouseAnimeType08 {bottom: 0;}
figcaption p.nextRead {
	margin: 1.0rem;
	padding: 0.5rem;
	color: var(--app-li-figcaption-txt); /* テキスト色*/
	text-align:right;
	font-size: 1.4rem;
	border-bottom: var(--app-li-figcaption-brd); /* ボーダー指定*/
}
figcaption.mouseAnimeType08 p.nextRead {
	margin: 1.5rem 1.0rem;
	padding: 0.5rem;
	color: var(--app-li-figcaption-txt); /* テキスト色*/
	text-align:right;
	font-size: 1.4rem;
}
figcaption p.figureCap {
	padding: 2.0rem;
	color: var(--app-li-figcaption-txt); /* テキスト色*/
	text-align:left;
	font-size: var(--font-figureCap);
	line-height: 1.8;
}
/* preタグ */
pre {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow: auto;
}
/* detailsタグ */
details {
  /* --------アコーディオンの中身のスタイル-------- */
  &::details-content {
    transition:
      height 0.4s,
      opacity 0.4s,
      content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  /* --------アコーディオンの中身のスタイル（開いている時）-------- */
  &[open]::details-content {opacity: 1;}

  /* アコーディオンが開いた時のスタイル */
  &[open] .icon {transform: rotate(180deg);}
}
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}
/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}
/* ===================================================================================
for SP max-width: 600px
=================================================================================== */
@media screen and (max-width: 600px) {
	.hlf60,
	.hlf70,
	.hlf80,
	.hlf90 {width:none;}
	.boxW400,
	.boxW420,
	.boxW450,
	.boxW500,
	.boxW550,
	.boxW600,
	.boxW650,
	.boxW700,
	.boxW750,
	.boxW800,
	.boxW850 {width:100%;}
	.sp_only {display: block;}
	.pc_only {display: none;}

	.LayoutL {float: none;}
	.LayoutR {float: none;}

	.spBtM .LayoutL {float:left;}
	.spBtM .LayoutR {float:right;}

	/**** hr ****/
	.tpl-contents-block hr {margin: 1.0rem auto;}
}