@charset "UTF-8";
/* CSS Document */

header,
nav,
aside,
section,
footer,
figure,
figcaption {display:block;}

:root {
--main-color: #0D40B4;
--main-colo01: #4D73C9;
--main-colo02: #2958C3;
--main-colo03: #0A318B;
--main-colo04: #06256D;
--mainsub-color: #370FB8;
--mainsub-color01: #6D4FCC;
--mainsub-color02: #502BC7;
--mainsub-color03: #2A0B8F;
--mainsub-color04: #200770;
--accent-color: #FFD300;
--accent-color01: #FFE14F;
--accent-color02: #FFD81D;
--accent-color03: #D0AC00;
--accent-color04: #A28600;
--accentsub-color: #FFAA00;
--accentsub-color01: #FFC44F;
--accentsub-color02: #FFB41D;
--accentsub-color03: #D08B00;
--accentsub-color04: #A26C00;
--bace-color: #ffffff;
--bacesub-color: #aaebff;
--menu-span: 12px;/*メニューボタンの上下のスペース*/
--wrp-span-top:65px; /*ヘッダーの高さ*/
--wrp-spanpc-top:81px; /*ヘッダーの高さ(PC画面)*/
--wrp-span-bto:80px; /*コンタクトボックスの高さ*/
--font-type01:"Noto Sans JP", sans-serif;
--font-type02:"Noto Serif JP", serif;
--font-type03:"Exo 2", sans-serif;
}


#scrlNum{
	position:fixed;
	left:0;
	top:0;
	width:0.3em;
	z-index:10;
	display:none;
}


.photo img,
.image img{
width:100%;
}


/****************************
.title（見出し）
****************************/

.title.t01{
text-align:center;
border-bottom:solid 1px #aaa;
padding-bottom:0.6em;
margin-bottom:1.2em;
}
.title.t01::before{content:"＜"}
.title.t01:after{content:"＞"}




.title.t02{
text-align:center;
color:#fff;
background:var(--main-colo03);
padding:0.8em 1.6em;
margin-bottom:1.2em;
}

.title.t03{
font-size:1.1em;
font-weight:bold;
border-bottom:solid 1px #aaa;
padding-bottom:1.1em;
padding-left:2.5em;
margin-bottom:1.8em;
position:relative;
}
.title.t03 span{
position:absolute;
left:0;
top:0;
}



.title.t04{
font-size:1.0em;
/*font-weight:bold;*/
color:var(--main-color);
padding-left:2.5em;
margin-bottom:0.8em;
position:relative;
}
.title.t04 span{
position:absolute;
left:0;
top:0;
}

/****************************
.font（フォント形式）
****************************/

.font.f01{
font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font.f02{
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font.f03{
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.font.f04{
font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}






/*フォーム項目*/

input,
select,
button,
textarea {
	border:solid 1px #ccc;
	box-sizing:border-box;
	padding:5px 10px;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	background:#fff;
	-webkit-appearance: none;
	width:100%;
}

textarea{
height:200px;
}

input[type="checkbox"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
/*input[type="checkbox"].active::before*/
input[type="checkbox"]:checked::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 3px;        /* CSS3草案 */  
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
}

input[type="radio"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 20px;        /* CSS3草案 */  
	-webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 20px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
/*input[type="radio"].active::before*/
input[type="radio"]:checked::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 12px;   /* Firefox用 */
}

form .btmForm{
	padding-top:50px;
}
form .btmForm li{
	padding:10px 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button{
	cursor:pointer;
	border:solid 1px #999;
	background:#fff;
	color:var(--main-color);
	height:55px;
	line-height:55px;
	font-weight:bold;
	font-family:var(--font-type01);
	border-radius: 0px;        /* CSS3草案 */  
	-webkit-border-radius: 0px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 0px;   /* Firefox用 */
	padding:0 10px;
	transition-property:opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}


form dl,
.form dl {
padding:1.5em 0;
border-bottom:solid 1px #333;
}

form dl dt,
.form dl dt {
margin-bottom:0.5em;
}

form dl dd,
.form dl dd {
display:flex;
flex-wrap: wrap;
}

form dl dd .line,
.form dl dd .line{
padding:0.3em 0.7em;
width:100%;
}
.mailcheck dd .line,
.mailcheck dd .line{
font-weight:bold;
color:var(--mainsub-color);
}
.mailError li,
.mailError li{
font-weight:bold;
color:#f00;
}

form .listBtm, .form .listBtm,
form .listBtm li, .form .listBtm li{
margin:0;
padding:0;
}
form .listBtm li, .form .listBtm li{
padding:0.5em 0;
}


/*使用不可の時の表示設定*/
input.useless {
	opacity:0.5;
	cursor:text;
	background-color:#eee;
}



/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( min-width:768px ){


input[type="button"],
input[type="reset"],
input[type="submit"],
button{
	height:55px;
	line-height:55px;
	padding:0 30px;
}


form dl dd .line_1,
.form dl dd .line_1{
width:100%;
}
form dl dd .line_2,
.form dl dd .line_2{
width:50%;
}
form dl dd .line_3,
.form dl dd .line_3{
width:33%;
width : -webkit-calc(100% / 3);
width : calc(100% / 3);
}


form .listBtm, .form .listBtm{
display:flex;
justify-content: center;
}
form .listBtm li, .form .listBtm li{
padding:0 1.0em;
}

}








.clear{
	clear:both;
}

.clearfix:after {
	display:block;
	clear:both;
	content:"";
	height:0;
	visibility:hidden;
}

img {
	max-width:100%;
	height:auto;
}

table {
	border-collapse:collapse;
}

body {
	-webkit-text-size-adjust: 100%;
	font-size:14px;
	line-height:2.1em;
/*background:url(css_img/bgPageParts.png) no-repeat center top;
background-size:150%;
background-attachment: fixed;*/
}

.wideFrame {
	width:auto;
	padding:0 10px;/**/
}


/*h2　見出しのパターン*/

h2 {
	padding:8px 25px;
	padding-top:35px;
	color:#333;
	/*font-family:var(--font-type01);*/
	font-size:1.62em;
	font-weight:bold;
	margin-bottom:35px;
	position:relative;
}
h2:after {
	content: "";
    display: block;
    width: 113px;
    height: 109px;
    background: #ddf0ff;
    position: absolute;
    left: 0.5em;
    bottom: 0;
    z-index: -1;
}

h2.ttl.t01 {
    font-size: 1.32em;
    padding: 1em 1.2em;
    background: #e9e9e9;
}
h2.ttl.t01:after {
display:none;
}

#wrapper {
	padding-top:var(--wrp-span-top);
	/*padding-bottom:80px;*/
	padding-bottom:var(--wrp-span-bto);
	position:relative;
}
#wrapper::before {
content:"";
display:block;
width:100%;
height:100%;
position:fixed;
background:url(css_img/bgPageParts.png) no-repeat center top;
background-size:150%;
z-index:-1;
}


@media screen and ( min-width:768px ){
#wrapper::before {
background-position:left top;
background-size:90%;
z-index:-1;
}
}



/*リスト項目の表示*/

ul{
	padding:10px 0 10px 5px;
}
li {
	position:relative;
	padding:8px 0 8px 25px;
}
li span {
	position:absolute;
	left:0;
	top:8px;
}

ul.list.l01 li::before{
content:"・ ";
position:absolute;
left:0;
top:8px;
}


.list.l02 {
    border: solid 1px #bcbcbc;
    background:#ffffffaa;
}
.list.l02 > li,
.list.l02 > dl{
border-bottom:solid 1px #bcbcbc;
padding: 1.5em 1.2em;
}
.list.l02 > dl dt {
    margin-bottom: 0.5em;
    font-weight: bold;
}
.list.l02 > dl dt::before {
    content: "■";
    margin-right: 0.8em;
}



@media screen and ( min-width:768px ){

.list.l02 > dl {
    padding: 1.6em 2em;
    font-size: 0.95em;
}

}

/*解説タグ項目の表示*/
.dl.dl01{
padding-left:1.8em;
position:relative;
}
.dl.dl01 span{
position:absolute;
left:0.5em;
top:0;
}



a.btm {
	display:block;
	font-size:1.2em;
	text-align:left;
	padding:11px 10px;
	box-sizing:border-box;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
}
a.btm.b01 {
	position:relative;
	font-family:var(--font-type01);
	font-weight:500;
	color:var(--main-color);
	padding-right:65px;
	border-radius: 0;        /* CSS3草案 */  
	-webkit-border-radius: 0;    /* Safari,Google Chrome用 */
	-moz-border-radius: 0;   /* Firefox用 */
}
a.btm.b01:after {
	position:absolute;
content:"";
display:block;
width:50px;
height:1px;
right:0;
top:50%;
background:var(--main-color);
transform:translate(0,-50%);
}

a.btm.b02 {
padding:0 1.0em;
font-size:1.1em;
height:40px;
line-height:40px;
text-align:center;
color:#fff;
background:var(--accentsub-color);
border-radius: 40px;        /* CSS3草案 */  
-webkit-border-radius: 40px;    /* Safari,Google Chrome用 */
-moz-border-radius: 40px;   /* Firefox用 */
}

a.btm.b03 {
padding:0.43em 1.0em;
font-size:1.1em;
text-align:center;
color:#fff;
background:var(--main-color);
}


/*その他*/

.markScroll {
	position:relative;
}
.markScroll::before,
.markScroll:after {
	content:"";
	display:block;
	right:10px;
	border-right:solid 5px transparent;
	border-left:solid 5px transparent;
	position:absolute;
}
.markScroll::before {
	top:5px;
	border-top:solid 5px transparent;
	border-bottom:solid 8px #ccc;
}
.markScroll:after {
	bottom:5px;
	border-top:solid 8px #ccc;
	border-bottom:solid 5px transparent;
}

li.markNew {
	padding-left:80px;
}

li.markNew::before {
	content:"new!";
	display:block;
	color:#fff;
	font-size:0.87em;
	background:#31BAB5;
	padding:0 8px;
	height:22px;
	line-height:22px;
	position:absolute;
	left:0;
	top:7px;
	order-radius: 22px;        /* CSS3草案 */  
	-webkit-border-radius: 22px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 22px;   /* Firefox用 */
}

@media screen and ( min-width:992px )
{

	#wrapper {
		padding-top:var(--wrp-spanpc-top);
		padding-bottom:0;
	}
	.wideFrame {
		/*width:992px;*/
		width:1200px;
		margin-left:auto;
		margin-right:auto;
		padding:0;
	}
	
}

@media screen and ( min-width:768px ){

	body {
		font-size:16px;
		line-height:2.8em;
/*background-position:left top;
background-size:90%;*/
	}
	
	form .btmForm li{
		float:left;
		width:50%;
		padding:10px 10px;
		box-sizing:border-box;
	}
	
	h2 {
	padding: 8px 25px;
	padding-top: 85px;
	font-size: 2.31em;
	margin-bottom: 70px;
	}
	
	h2:after {
	width: 176px;
    height: 167px;
    left: 0;
    bottom: -0.5em;
	}
}


/*フィールド設定（.field）*/

.field{
	padding:2.0em 0.5em;
}

.field.f01{
	background:#ff8080;
	color:#fff;
}

.field.f02{
	background:#80fffbf5;
}

.field.f03{
	background:#7d7dff;
}





/*フレーム設定（.frame）*/
.frame{
	padding:1.5em 2.3em;
}

.frame.fr01{
	border:solid 1px #b2b2b2;
	background:#ffffffaa;
}

.frame.fr02{
	background:#e0efff;
	border-radius: 15px;        /* CSS3草案 */  
	-webkit-border-radius: 15px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 15px;   /* Firefox用 */
}
.frame.fr03{
	background: url(../../images/sample_0102.jpg) no-repeat center -220px;
	background-size: 100%;
	border:solid 2px #b2b2b2;
	box-shadow: 0 0 15px #00000033;
}

/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

.frame{
	padding:1.5em 4.3em;
}

}




/*マップ埋め込み設定（.map）*/

.map{
position:relative;
padding:70% 0 0 0;
overflow:hidden;
}
.map iframe{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}

/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

.map{
padding-top:40%;
}

}

/**********************************************************************************************************************************************************************************************
#header(ヘッダー)
*************************************************************************************************************************************************************************************************/



#header{
	position: fixed;
	width:100%;
	height:var(--wrp-span-top);
	left:0;
	top:0;
	/*background:#ffffffee;*/
	z-index: 15;
}
#header::before{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
content:"";
background:var(--main-color);
opacity:0.9;
}



#header h1{
	position: absolute;
	left:1em;
	width:205px;
	top:50%;
	transform: translate(0, -50%);
	z-index:10;
}
#header h1 a{
width:100%;
display:block;
height:0;
overflow:hidden;
padding:18% 0 0 0;
background:url("css_img/logo_w.svg") no-repeat left top;
background-size:100%;
}

/*メニュー画面表示させるボタン設定*/
#header #btmMenuScr{
	cursor:pointer;
	position: absolute;
	width:35px;
	height:35px;
	right:10px;
	top:50%;
	transform: translateY(-50%);
	margin:0;
	padding:0;
	background:var(--main-color);
}
#header #btmMenuScr .tag{
	padding: 0;
	margin:0;
	position: absolute;
	width:65%;
	height: 2px;
	left:50%;
	top:var(--menu-span);
	transform: translateX(-50%);
	background:#fff;
}
#header #btmMenuScr .tag:nth-child(2){
	top:auto;
	bottom:var(--menu-span);
}

/***************メニュー画面が開くとき***************/
@-webkit-keyframes btmOpenMenu01 {
	0% { top:var(--menu-span); transform: translateX(-50%); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); } 
}
@keyframes btmOpenMenu01 {
	0% { top:var(--menu-span); transform: translateX(-50%); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); } 
}
body.openMenu #header #btmMenuScr .tag{
	animation: btmOpenMenu01 0.5s ease 0s forwards alternate;
	-webkit-animation: btmOpenMenu01 0.5s ease 0s forwards alternate;
}

@-webkit-keyframes btmOpenMenu02 {
	0% { bottom:var(--menu-span); transform: translateX(-50%); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); } 
}
@keyframes btmOpenMenu02 {
	0% { bottom:var(--menu-span); transform: translateX(-50%); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); } 
}
body.openMenu #header #btmMenuScr .tag:nth-child(2){
	animation: btmOpenMenu02 0.5s ease 0s forwards alternate;
	-webkit-animation: btmOpenMenu02 0.5s ease 0s forwards alternate;
}



/***************メニュー画面を閉じるとき***************/

@-webkit-keyframes btmCloseMenu01 {
	0% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:var(--menu-span); transform: translateX(-50%); }
}
@keyframes btmCloseMenu01 {
	0% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:var(--menu-span); transform: translateX(-50%); }
}
body.hideMenu #header #btmMenuScr .tag{
	animation: btmCloseMenu01 0.5s ease 0s forwards alternate;
	-webkit-animation: btmCloseMenu01 0.5s ease 0s forwards alternate;
}


@-webkit-keyframes btmCloseMenu02 {
	0% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:var(--menu-span); transform: translateX(-50%); }
}
@keyframes btmCloseMenu02 {
	0% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:var(--menu-span); transform: translateX(-50%); }
}
body.hideMenu #header #btmMenuScr .tag:nth-child(2){
	animation: btmCloseMenu02 0.5s ease 0s forwards alternate;
	-webkit-animation: btmCloseMenu02 0.5s ease 0s forwards alternate;
}

@media screen and ( min-width:768px ){

	#header{
		height: var(--wrp-spanpc-top);
	}
	
	#header h1{
	left: 4.5em;
	width: 252px;
	}

	#header #btmMenuScr{
		width:55px;
		height:15px;
		right:20px;
		display:none;
	}

}



/**********************************************************************************************************************************************************************************************
.inPoint(アンカーポイントの付加)
*************************************************************************************************************************************************************************************************/


.inPoint{
	position: relative;
}

.inPoint .inPointTop{
	position: absolute;
	left:0;
	top:-45px; /*ヘッダーの高さに合わせて変更をかけてください。*/
}

@media screen and ( min-width:768px ){
	.inPoint .inPointTop{
		top:-81px; /*ヘッダーの高さに合わせて変更をかけてください。*/
	}
}


/**********************************************************************************************************************************************************************************************
#aNav(メニュー項目)
*************************************************************************************************************************************************************************************************/

#aNav{
	width:100%;
	height:100vh;
	height:-webkit-calc(100vh -  var(--wrp-span-top)) ;
	height:calc(100vh - var(--wrp-span-top)) ;
	opacity:0;
	transform: translateX(100%);
	background:#e8edf2;
	color:#fff;
	position: fixed;
	left:0;
	bottom:0;
	transition-property:transform, opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}

body.openMenu #aNav{
padding:2.3em 0.5em;
	opacity:1;
	transform: translateX(0);
}

#aNav ul,
#aNav li{
padding:0;
margin:0;
}


#aNav li{
	text-align:center;
	padding:1.0em 0.3em;
}
#aNav li a{
display:block;
color:#000;
font-family:var(--font-type01);
font-size:1.3em;
font-weight:bold;
position:relative;
}
#aNav li a small{
display:block;
font-family:var(--font-type03);
}


@media screen and ( min-width:768px ){
	

	#aNav{
	width:auto;
		height:45px;
		position:absolute;
		right:0;
		bottom:0.35em;
		transform: translateX(0);
		opacity:1;
		background:none;
	}
	#aNav ul{
		display:flex;
		justify-content: flex-end;
		padding-right:80px;
	}
	#aNav ul li{
	padding:0 1.5em;
	}
	
	#aNav li a{
	font-size:1.15em;
		color:#fff!important;
		text-decoration:none;
	}
	#aNav li a small{
		color:var(--bacesub-color);
	}
	
	#aNav li a::before{
	content:"";
	display:block;
	width:0;
	height:11px;
	position:absolute;
	left:0;
	bottom:0;
	background:var(--accent-color);
	opacity:0;
	transition-property:opacity,width;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
	}
	#aNav li a:hover::before{
	width:100%;
	opacity:0.4;
	}
	
}

/**********************************************************************************************************************************************************************************************
#footer(フッター項目)
*************************************************************************************************************************************************************************************************/

#footer{
	background:#999;
	color:#fff;
	padding:2.0em 0.8em;
}

#footer #btmScrollTop{
position:fixed;
right:15px;
bottom:100px;
display:block;
background:#fff url(css_img/iconTop.svg) center center;
background-size:85%;
width:60px;
height:0;
overflow:hidden;
padding:60px 0 0 0;
border-radius: 60px;        /* CSS3草案 */  
-webkit-border-radius: 60px;    /* Safari,Google Chrome用 */
-moz-border-radius: 60px;   /* Firefox用 */
box-shadow:0 0 25px #00000033;
}
#footer #btmScrollTop.hide{
display:none;
}

#footer #wordCopy{
	text-align: center;
}

#footer #contact_tool{
	height:var(--wrp-span-bto);
	background:#ffffffcc;
	position:fixed;
	left:50%;
	bottom:0;
	transform:translate(-50%,0);
	width:100%;
}
#footer #contact_tool::before{
    content: "Contact area";
    font-size: 1.7em;
    color: #4a4a4a;
    position: absolute;
    left: 1.8em;
    top: 50%;
    transform: translateY(-50%);
}

#footer #contact_tool .btmCont{
width:80px;
height:0;
padding:80px 0 0 0;
display:block;
background:var(--accentsub-color);
position:absolute;
bottom:0;
}
#footer #contact_tool .btmCont#btmTel{left:0;}
#footer #contact_tool .btmCont#btmMailpage{right:0;}


#footer #contact_tool .btmCont::before{
content:"";
display:block;
width:60px;
height:60px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:no-repeat center center;
background-size:100%;
}
#footer #contact_tool #btmTel.btmCont::before{
background-image:url(css_img/iconContact_tel.svg);
}
#footer #contact_tool #btmMailpage.btmCont::before{
background-image:url(css_img/iconContact_mail.svg);
}



@media screen and ( min-width:768px ){
#footer #contact_tool{
display:none;
}

#footer #btmScrollTop{
right:45px;
bottom:60px;
width:85px;
overflow:hidden;
padding-top:85px;
border-radius: 85px;        /* CSS3草案 */  
-webkit-border-radius: 85px;    /* Safari,Google Chrome用 */
-moz-border-radius: 85px;   /* Firefox用 */
}

}



/**********************************************************************************************************************************************************************************************
#contents(内容)
*************************************************************************************************************************************************************************************************/


#contents{
min-height:300px;
padding-bottom: 4.8em;
}

#contents .blockarea{
margin-bottom:5.1em;
}
#contents .blockarea:last-child{
margin-bottom:0;
}

#contents p{
margin-bottom:1.6em;
}

#contents .textbox p:last-child{
margin-bottom:0;
}

/*#page_title（下層ページタイトル）*/

#contents #page_title .frame{
display:flex;
justify-content: flex-end;
position:relative;
align-items: center;
margin:auto;
margin-bottom:3.0em;
}

#contents #page_title .frame:after{
content:"";
display:block;
width:80%;
height:0;
padding:52% 0 0 0;
background:var(--main-color) url(css_img/bgTtlparts_other01.jpg) no-repeat center center;
background-size:cover;
}

#contents #page_title .frame .box{
display:flex;
flex-wrap: wrap;
background:#fff;
box-shadow:0 0 15px #00000033;
padding:1.2em 2.0em;
    position: absolute;
    left: 1em;
    bottom: 0.5em;
}


#contents #page_title .box small,
#contents #page_title .box span{
width:100%;
}

#contents #page_title .box small{
font-family:var(--font-type03);
font-size:1.8em;
font-weight:bold;
color:var(--main-color);
margin-bottom:0.13em;
order:1;
}
#contents #page_title .box span{
order:2;
}


@media screen and ( min-width:768px ){

#contents{
padding-bottom: 4.8em;
}


#contents #page_title .frame{
padding:2.5em 0;
padding-top:3.5em;
max-width:1500px;
}

#contents #page_title .frame .box{
padding:1.8em 3.5em;
}

#contents #page_title .box small{
font-size:3.2em;
}
#contents #page_title .box span{
font-size:1.28em;
}

#contents #page_title .frame:after{
width:80%;
padding-top:300px;
}

}