@charset "UTF-8";
/*if using web font by google*/
/*@import "_typography/font-family-noto-sans.scss";*/
/*font-weight　400のみ場合*/
/*@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');*/
/*全てのウェイトを読み込む*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap");
body {
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

/*.eu {
  font-family: "Crimson Text", serif;
  font-weight: 400;
  font-style: normal;
}*/
/*bootstrap > overwrite bootstrap
mtx framework > overwrite mtx-framework */

/*@group mtx-framework*/

/* @group bg */

.bg-ol {
	border: 1px solid #888;
}

.bg-white1 {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-white2 {
	background-color: rgba(255, 255, 255, 0.2) !important;
}

.bg-white3 {
	background-color: rgba(255, 255, 255, 0.3) !important;
}

.bg-white4 {
	background-color: rgba(255, 255, 255, 0.4) !important;
}

.bg-white5 {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

.bg-white6 {
	background-color: rgba(255, 255, 255, 0.6) !important;
}

.bg-white7 {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

.bg-white8 {
	background-color: rgba(255, 255, 255, 0.8) !important;
}

.bg-white9 {
	background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg-gray1 {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

.bg-gray2 {
	background-color: rgba(0, 0, 0, 0.2) !important;
}

.bg-gray3 {
	background-color: rgba(0, 0, 0, 0.3) !important;
}

.bg-gray4 {
	background-color: rgba(0, 0, 0, 0.4) !important;
}

.bg-gray5 {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

.bg-gray6 {
	background-color: rgba(0, 0, 0, 0.6) !important;
}

.bg-gray7 {
	background-color: rgba(0, 0, 0, 0.7) !important;
}

.bg-gray8 {
	background-color: rgba(0, 0, 0, 0.8) !important;
}

.bg-gray9 {
	background-color: rgba(0, 0, 0, 0.9) !important;
}

.bg-dgray {
	background-color: #8c8c8c !important;
}

.bg-gray {
	background-color: #c5c5c5 !important;
}

.bg-lgray {
	background-color: #e4e4e4 !important;
}

.bg-none {
	background: none !important;
}

.bg-white {
	background: white !important;
}

/*.bg-sea5	{background-color:rgba(0,135,255,0.5)!important;}
.bg-sea4	{background-color:rgba(0,135,255,0.4)!important;}
.bg-sea3	{background-color:rgba(0,135,255,0.3)!important;}
.bg-sea2	{background-color:rgba(0,135,255,0.2)!important;}
.bg-sea1	{background-color:rgba(0,135,255,0.1)!important;}*/

.bg-sea5 {
	background-color: rgba(64, 91, 128, 0.5) !important;
}

.bg-sea4 {
	background-color: rgba(64, 91, 128, 0.4) !important;
}

.bg-sea3 {
	background-color: rgba(64, 91, 128, 0.3) !important;
}

.bg-sea2 {
	background-color: rgba(64, 91, 128, 0.2) !important;
}

.bg-sea1 {
	background-color: rgba(64, 91, 128, 0.1) !important;
}

/*.bg-sky5	{background-color:rgba(0,208,255,0.5)!important;}
.bg-sky4	{background-color:rgba(0,208,255,0.4)!important;}
.bg-sky3	{background-color:rgba(0,208,255,0.3)!important;}
.bg-sky2	{background-color:rgba(0,208,255,0.2)!important;}
.bg-sky1	{background-color:rgba(0,208,255,0.1)!important;}*/

.bg-sky5 {
	background-color: rgba(64, 116, 128, 0.5) !important;
}

.bg-sky4 {
	background-color: rgba(64, 116, 128, 0.4) !important;
}

.bg-sky3 {
	background-color: rgba(64, 116, 128, 0.3) !important;
}

.bg-sky2 {
	background-color: rgba(64, 116, 128, 0.2) !important;
}

.bg-sky1 {
	background-color: rgba(64, 116, 128, 0.1) !important;
}

/*.bg-leaf5	{background-color:rgba(0,255,35,0.5)!important;}
.bg-leaf4	{background-color:rgba(0,255,35,0.4)!important;}
.bg-leaf3	{background-color:rgba(0,255,35,0.3)!important;}
.bg-leaf2	{background-color:rgba(0,255,35,0.2)!important;}
.bg-leaf1	{background-color:rgba(0,255,35,0.1)!important;}*/

.bg-leaf5 {
	background-color: rgba(51, 128, 67, 0.5) !important;
}

.bg-leaf4 {
	background-color: rgba(51, 128, 67, 0.4) !important;
}

.bg-leaf3 {
	background-color: rgba(51, 128, 67, 0.3) !important;
}

.bg-leaf2 {
	background-color: rgba(51, 128, 67, 0.2) !important;
}

.bg-leaf1 {
	background-color: rgba(51, 128, 67, 0.1) !important;
}

/*.bg-grape5	{background-color:rgba(120,0,255,0.5)!important;}
.bg-grape4	{background-color:rgba(120,0,255,0.4)!important;}
.bg-grape3	{background-color:rgba(120,0,255,0.3)!important;}
.bg-grape2	{background-color:rgba(120,0,255,0.2)!important;}
.bg-grape1	{background-color:rgba(120,0,255,0.1)!important;}*/

.bg-grape5 {
	background-color: rgba(91, 51, 128, 0.5) !important;
}

.bg-grape4 {
	background-color: rgba(91, 51, 128, 0.4) !important;
}

.bg-grape3 {
	background-color: rgba(91, 51, 128, 0.3) !important;
}

.bg-grape2 {
	background-color: rgba(91, 51, 128, 0.2) !important;
}

.bg-grape1 {
	background-color: rgba(91, 51, 128, 0.1) !important;
}

.bg-tomato5 {
	background-color: rgba(255, 33, 0, 0.5) !important;
}

.bg-tomato4 {
	background-color: rgba(255, 33, 0, 0.4) !important;
}

.bg-tomato3 {
	background-color: rgba(255, 33, 0, 0.3) !important;
}

.bg-tomato2 {
	background-color: rgba(255, 33, 0, 0.2) !important;
}

.bg-tomato1 {
	background-color: rgba(255, 33, 0, 0.1) !important;
}

.bg-orange5 {
	background-color: rgba(255, 160, 0, 0.5) !important;
}

.bg-orange4 {
	background-color: rgba(255, 160, 0, 0.4) !important;
}

.bg-orange3 {
	background-color: rgba(255, 160, 0, 0.3) !important;
}

.bg-orange2 {
	background-color: rgba(255, 160, 0, 0.2) !important;
}

.bg-orange1 {
	background-color: rgba(255, 160, 0, 0.1) !important;
}

.bg-lemon5 {
	background-color: rgba(255, 230, 0, 0.5) !important;
}

.bg-lemon4 {
	background-color: rgba(255, 230, 0, 0.4) !important;
}

.bg-lemon3 {
	background-color: rgba(255, 230, 0, 0.3) !important;
}

.bg-lemon2 {
	background-color: rgba(255, 230, 0, 0.2) !important;
}

.bg-lemon1 {
	background-color: rgba(255, 230, 0, 0.1) !important;
}

bg-blue {
	/*background-color:hsl(200deg 30% 70%)!important;*/
	background-color: #8c9ed9 !important;
}

.bg-lblue {
	/*	background-color:hsl(200deg 30% 80%)!important;*/
	background-color: #b3bee6 !important;
}

.bg-llblue {
	/*background-color:hsl(200deg 30% 90%)!important;*/
	background-color: #d9dff2 !important;
}

.bg-blue2 {
	/*background-color:hsl(200deg 30% 70%)!important;*/
	background-color: #8cbfd9 !important;
}

.bg-lblue2 {
	/*	background-color:hsl(200deg 30% 80%)!important;*/
	background-color: #b3d5e6 !important;
}

.bg-llblue2 {
	/*background-color:hsl(200deg 30% 90%)!important;*/
	background-color: #d9eaf2 !important;
}

.bg-green {
	/*background-color:hsl(127deg 30% 70%)!important;*/
	background-color: #8cd995 !important;
}

.bg-lgreen {
	/*	background-color:hsl(127deg 30% 80%)!important;*/
	background-color: #b3e6b8 !important;
}

.bg-llgreen {
	/*background-color:hsl(127deg 30% 90%)!important;*/
	background-color: #d9f2dc !important;
}

/* @end */
/*.bg-lightgray {
	background-color: #e4e4e4;
}*/
/*.bg-darkgray{
	background-color: #8c8c8c;
}*/
/*test 2020-01-28*/
/*.opacity-0 {opacity:0;} .opacity-10 {opacity:0.1;} .opacity-20 {opacity:0.2;}
.opacity-30 {opacity:0.3;}.opacity-40 {opacity:0.4;}.opacity-50 {opacity:0.5;}
.opacity-60 {opacity:0.6;} .opacity-70 {opacity:0.7;}.opacity-80 {opacity:0.8;}
.opacity-90 {opacity:0.9;}.opacity-100 {opacity:1;}*/
/*.box-lightgray, .box-gray, .box-darkgray {
	font-size: 14px;;
	font-weight: 400;
	padding: 4px 14px;
	margin-right: 6px;
	margin-left: 6px;
	/*border-right: 1px solid silver;
	border-left: 1px solid silver;*!/
	border: 1px solid #b4b4b4;
	margin-top: 0px;
}*/
/*ボーダー（枠）共通（薄い色のみ）*/
/*.box-white, .box-lightgray {
	border: 1px solid #b4b4b4;
}

.box-attention {
	padding: 4px 14px;
	margin-right: 10px;
	margin-left: 10px;
	background-color: #d19d80;
	color: white;
	font-weight: 700;
}*/
/*New since 2025*/

.f-black {
	color: black !important;
}

.f-dgray {
	color: #555 !important;
}

.f-gray {
	color: gray !important;
}

.f-lgray {
	color: #afafa !important;
}

.f-silver {
	color: silver !important;
}

.f-white {
	color: white !important;
}

.f-red {
	color: #c62828 !important;
}

.f-white1 {
	color: rgba(255, 255, 255, 0.1) !important;
}

.f-white2 {
	color: rgba(255, 255, 255, 0.2) !important;
}

.f-white3 {
	color: rgba(255, 255, 255, 0.3) !important;
}

.f-white4 {
	color: rgba(255, 255, 255, 0.4) !important;
}

.f-white5 {
	color: rgba(255, 255, 255, 0.5) !important;
}

.f-white6 {
	color: rgba(255, 255, 255, 0.6) !important;
}

.f-white7 {
	color: rgba(255, 255, 255, 0.7) !important;
}

.f-white8 {
	color: rgba(255, 255, 255, 0.8) !important;
}

.f-white9 {
	color: rgba(255, 255, 255, 0.9) !important;
}

.f-white {
	color: white !important;
}

.f-gray1 {
	color: rgba(128, 128, 128, 0.1) !important;
}

.f-gray2 {
	color: rgba(128, 128, 128, 0.2) !important;
}

.f-gray3 {
	color: rgba(128, 128, 128, 0.3) !important;
}

.f-gray4 {
	color: rgba(128, 128, 128, 0.4) !important;
}

.f-gray5 {
	color: rgba(128, 128, 128, 0.5) !important;
}

.f-gray6 {
	color: rgba(128, 128, 128, 0.6) !important;
}

.f-gray7 {
	color: rgba(128, 128, 128, 0.7) !important;
}

.f-gray8 {
	color: rgba(128, 128, 128, 0.8) !important;
}

.f-gray9 {
	color: rgba(128, 128, 128, 0.9) !important;
}

.f-black1 {
	color: rgba(0, 0, 0, 0.1) !important;
}

.f-black2 {
	color: rgba(0, 0, 0, 0.2) !important;
}

.f-black3 {
	color: rgba(0, 0, 0, 0.3) !important;
}

.f-black4 {
	color: rgba(0, 0, 0, 0.4) !important;
}

.f-black5 {
	color: rgba(0, 0, 0, 0.5) !important;
}

.f-black6 {
	color: rgba(0, 0, 0, 0.6) !important;
}

.f-black7 {
	color: rgba(0, 0, 0, 0.7) !important;
}

.f-black8 {
	color: rgba(0, 0, 0, 0.8) !important;
}

.f-black9 {
	color: rgba(0, 0, 0, 0.9) !important;
}

.f-black {
	color: black !important;
}

/*2022-12-09*/

a img {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.highlight:hover {
	opacity: 0.50;
	filter: alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	-moz-opacity: 0.50;
}

/*when pointing over [a] tag*/

a:hover {
	cursor: pointer;
}

/*New since 2025*/

.f-black {
	color: black !important;
}

.f-dgray {
	color: #555 !important;
}

.f-gray {
	color: gray !important;
}

.f-lgray {
	color: #afafa !important;
}

.f-silver {
	color: silver !important;
}

.f-white {
	color: white !important;
}

.f-red {
	color: #c62828 !important;
}

.f-white1 {
	color: rgba(255, 255, 255, 0.1) !important;
}

.f-white2 {
	color: rgba(255, 255, 255, 0.2) !important;
}

.f-white3 {
	color: rgba(255, 255, 255, 0.3) !important;
}

.f-white4 {
	color: rgba(255, 255, 255, 0.4) !important;
}

.f-white5 {
	color: rgba(255, 255, 255, 0.5) !important;
}

.f-white6 {
	color: rgba(255, 255, 255, 0.6) !important;
}

.f-white7 {
	color: rgba(255, 255, 255, 0.7) !important;
}

.f-white8 {
	color: rgba(255, 255, 255, 0.8) !important;
}

.f-white9 {
	color: rgba(255, 255, 255, 0.9) !important;
}

.f-white {
	color: white !important;
}

.f-gray1 {
	color: rgba(128, 128, 128, 0.1) !important;
}

.f-gray2 {
	color: rgba(128, 128, 128, 0.2) !important;
}

.f-gray3 {
	color: rgba(128, 128, 128, 0.3) !important;
}

.f-gray4 {
	color: rgba(128, 128, 128, 0.4) !important;
}

.f-gray5 {
	color: rgba(128, 128, 128, 0.5) !important;
}

.f-gray6 {
	color: rgba(128, 128, 128, 0.6) !important;
}

.f-gray7 {
	color: rgba(128, 128, 128, 0.7) !important;
}

.f-gray8 {
	color: rgba(128, 128, 128, 0.8) !important;
}

.f-gray9 {
	color: rgba(128, 128, 128, 0.9) !important;
}

.f-black1 {
	color: rgba(0, 0, 0, 0.1) !important;
}

.f-black2 {
	color: rgba(0, 0, 0, 0.2) !important;
}

.f-black3 {
	color: rgba(0, 0, 0, 0.3) !important;
}

.f-black4 {
	color: rgba(0, 0, 0, 0.4) !important;
}

.f-black5 {
	color: rgba(0, 0, 0, 0.5) !important;
}

.f-black6 {
	color: rgba(0, 0, 0, 0.6) !important;
}

.f-black7 {
	color: rgba(0, 0, 0, 0.7) !important;
}

.f-black8 {
	color: rgba(0, 0, 0, 0.8) !important;
}

.f-black9 {
	color: rgba(0, 0, 0, 0.9) !important;
}

.f-black {
	color: black !important;
}

/*Font Weight*/
/*.fw1{font-weight: 100;}.fw2{font-weight: 200;}.fw3{font-weight: 300;}.fw4{font-weight: 400;}
.fw5{font-weight: 500;}.fw6{font-weight: 600;}.fw7{font-weight: 700;}.fw8{font-weight: 800;}
.fw9{font-weight: 900;}*/
/*FONT BOLD/NORMAL/LIGHT/THIN*/
/*MTX 2022-02-10*/
/*.fnormal {font-weight: normal!important;} 
.fbold {font-weight: bold!important;}
.flight {font-weight: 300!important;} 
.fthin {font-weight: 100!important;}*/
/*overwrite text.scss*/
/*.fnormal {font-weight: 500;} .fbold {font-weight: 700;}
.flight {font-weight: 300;} .fthin {font-weight: 100;}*/

.f-normal, .fnormal {
	border: none !important;
	text-decoration: none !important;
	font-weight: normal !important;
}

/*.f-heavy{font-weight: 700!important;}*/

/*@group font-weight*/

.fw1 {
	font-weight: 100 !important;
}

.fw2 {
	font-weight: 200 !important;
}

.fw3 {
	font-weight: 300 !important;
}

.fw4 {
	font-weight: 400 !important;
}

.fw5 {
	font-weight: 500 !important;
}

.fw6 {
	font-weight: 600 !important;
}

.fw7 {
	font-weight: 700 !important;
}

.fw8 {
	font-weight: 800 !important;
}

.fw9 {
	font-weight: 900 !important;
}

.f-light {
	font-weight: 200 !important;
}

.f-thin {
	font-weight: 100 !important;
}

strong, .strong {
	font-weight: 700 !important;
}

.thin {
	font-weight: 100 !important;
}

/*@end font-weight*/

/*@group font-size*/

.fxsmall {
	font-size: 0.84rem !important;
}

.fsmall {
	font-size: 0.9rem !important;
}

.fregular {
	font-size: 1rem !important;
}

.flarge {
	font-size: 1.15rem !important;
}

.fxlarge {
	font-size: 1.4rem !important;
}

.f-smaller {
	font-size: smaller !important;
}

.f-larger {
	font-size: larger !important;
}

.f-xsmall {
	font-size: 0.84rem !important;
}

.f-small {
	font-size: 0.9rem !important;
}

.f-regular {
	font-size: 1rem !important;
}

.f-large {
	font-size: 1.15rem !important;
}

.f-xlarge {
	font-size: 1.4rem !important;
}

/*@end font-size*/
/*line height*/

.lh10 {
	line-height: 100%;
}

.lh12 {
	line-height: 120%;
}

.lh14 {
	line-height: 140%;
}

.lh16 {
	line-height: 160%;
}

.lh18 {
	line-height: 180%;
}

.lh20 {
	line-height: 200%;
}

.lh22 {
	line-height: 220%;
}

.lh22 {
	line-height: 240%;
}

.lh26 {
	line-height: 260%;
}

.lh28 {
	line-height: 280%;
}

.lh30 {
	line-height: 300%;
}

/*Other Text Appearance*/
/*FONT COLOR*/
/*mtx*/
/*.fblack {color: black;}.fdgray {color: #555;}.fgray {color: gray;} .flgray {color: #afafaf;} 
.fsilver {color: silver;}.fwhite {color: white;} 
.fred {color: #c62828;} */
/*.btn {font-size: 1.45rem;}*/

.shadow {
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
}

/*past>>>bootstrap4 text-light */
/*.tl {text-align: left;} .tc {text-align: center;} .tr {text-align: right;} */
/*FONT SIZE*/
/*MTX added : 1px step  */

.fs6 {
	font-size: 6px !important;
}

.fs7 {
	font-size: 7px !important;
}

.fs8 {
	font-size: 8px !important;
}

.fs9 {
	font-size: 9px !important;
}

.fs10 {
	font-size: 10px !important;
}

.fs11 {
	font-size: 11px !important;
}

.fs12 {
	font-size: 12px !important;
}

.fs13 {
	font-size: 13px !important;
}

.fs14 {
	font-size: 14px !important;
}

.fs15 {
	font-size: 15px !important;
}

.fs16 {
	font-size: 16px !important;
}

.fs17 {
	font-size: 17px !important;
}

.fs18 {
	font-size: 18px !important;
}

.fs19 {
	font-size: 19px !important;
}

.fs20 {
	font-size: 20px !important;
}

.fs21 {
	font-size: 21px !important;
}

.fs22 {
	font-size: 22px !important;
}

.fs23 {
	font-size: 23px !important;
}

.fs24 {
	font-size: 24px !important;
}

.fs25 {
	font-size: 25px !important;
}

.fs26 {
	font-size: 26px !important;
}

.fs27 {
	font-size: 27px !important;
}

.fs28 {
	font-size: 28px !important;
}

.fs29 {
	font-size: 29px !important;
}

.fs30 {
	font-size: 30px !important;
}

.fs31 {
	font-size: 31px !important;
}

.fs32 {
	font-size: 32px !important;
}

.fs33 {
	font-size: 33px !important;
}

.fs34 {
	font-size: 34px !important;
}

.fs35 {
	font-size: 35px !important;
}

.fs36 {
	font-size: 36px !important;
}

.fs37 {
	font-size: 37px !important;
}

.fs38 {
	font-size: 38px !important;
}

.fs39 {
	font-size: 39px !important;
}

.fs40 {
	font-size: 40px !important;
}

/*50~100 [10step]*/

.fs50 {
	font-size: 50px !important;
}

.fs60 {
	font-size: 60px !important;
}

.fs70 {
	font-size: 70px !important;
}

.fs80 {
	font-size: 80px !important;
}

.fs90 {
	font-size: 90px !important;
}

.fs100 {
	font-size: 100px !important;
}

/*@media  (max-width: 991px) {
.fs10-md {font-size: 10px!important;}.fs11-md {font-size: 11px!important;}.fs12-md {font-size: 12px!important;}
.fs13-md {font-size: 13px!important;}.fs14-md {font-size: 14px!important;}.fs15-md {font-size: 15px!important;}
.fs16-md {font-size: 16px!important;}.fs17-md {font-size: 17px!important;}.fs18-md {font-size: 18px!important;}
.fs19-md {font-size: 19px!important;}.fs20-md {font-size: 20px!important;}.fs21-md {font-size: 21px!important;}
.fs22-md {font-size: 22px!important;}.fs23-md {font-size: 23px!important;}.fs24-md {font-size: 24px!important;}
.fs25-md {font-size: 25px!important;}.fs26-md {font-size: 26px!important;}.fs27-md {font-size: 27px!important;}
.fs28-md {font-size: 28px!important;}.fs29-md {font-size: 29px!important;}.fs30-md {font-size: 30px!important;}
}*/
/*MTX added for bootstrap screen [sm]*/

@media (max-width: 575px) {
	.fs10-sm {
		font-size: 10px !important;
	}
	
	.fs11-sm {
		font-size: 11px !important;
	}
	
	.fs12-sm {
		font-size: 12px !important;
	}
	
	.fs13-sm {
		font-size: 13px !important;
	}
	
	.fs14-sm {
		font-size: 14px !important;
	}
	
	.fs15-sm {
		font-size: 15px !important;
	}
	
	.fs16-sm {
		font-size: 16px !important;
	}
	
	.fs17-sm {
		font-size: 17px !important;
	}
	
	.fs18-sm {
		font-size: 18px !important;
	}
	
	.fs19-sm {
		font-size: 19px !important;
	}
	
	.fs20-sm {
		font-size: 20px !important;
	}
	
	.fs21-sm {
		font-size: 21px !important;
	}
	
	.fs22-sm {
		font-size: 22px !important;
	}
	
	.fs23-sm {
		font-size: 23px !important;
	}
	
	.fs24-sm {
		font-size: 24px !important;
	}
	
	.fs25-sm {
		font-size: 25px !important;
	}
	
	.fs26-sm {
		font-size: 26px !important;
	}
	
	.fs27-sm {
		font-size: 27px !important;
	}
	
	.fs28-sm {
		font-size: 28px !important;
	}
	
	.fs29-sm {
		font-size: 29px !important;
	}
	
	.fs30-sm {
		font-size: 30px !important;
	}
}

.fs-xsmall {
	font-size: 0.84rem !important;
}

.fs-small {
	font-size: 0.9rem !important;
}

.fs-regular {
	font-size: 1rem !important;
}

.fs-large {
	font-size: 1.15rem !important;
}

.fs-xlarge {
	font-size: 1.4rem !important;
}

.fs-xsmall-sm {
	font-size: 0.84rem !important;
}

.fs-small-sm {
	font-size: 0.9rem !important;
}

.fs-regular-sm {
	font-size: 1rem !important;
}

.fs-large-sm {
	font-size: 1.15rem !important;
}

.fs-xlarge-sm {
	font-size: 1.4rem !important;
}

/*Class for setting margin*/

.ma0 {
	margin: 0;
}

.mt0 {
	margin-top: 0;
}

.mr0 {
	margin-right: 0;
}

.mb0 {
	margin-bottom: 0;
}

.ml0 {
	margin-left: 0;
}

.ma1 {
	margin: 1px;
}

.mt1 {
	margin-top: 1px;
}

.mr1 {
	margin-right: 1px;
}

.mb1 {
	margin-bottom: 1px;
}

.ml1 {
	margin-left: 1px;
}

.ma2 {
	margin: 2px;
}

.mt2 {
	margin-top: 2px;
}

.mr2 {
	margin-right: 2px;
}

.mb2 {
	margin-bottom: 2px;
}

.ml2 {
	margin-left: 2px;
}

.ma3 {
	margin: 3px;
}

.mt3 {
	margin-top: 3px;
}

.mr3 {
	margin-right: 3px;
}

.mb3 {
	margin-bottom: 3px;
}

.ml3 {
	margin-left: 3px;
}

.ma4 {
	margin: 4px;
}

.mt4 {
	margin-top: 4px;
}

.mr4 {
	margin-right: 4px;
}

.mb4 {
	margin-bottom: 4px;
}

.ml4 {
	margin-left: 4px;
}

.ma5 {
	margin: 5px;
}

.mt5 {
	margin-top: 5px;
}

.mr5 {
	margin-right: 5px;
}

.mb5 {
	margin-bottom: 5px;
}

.ml5 {
	margin-left: 5px;
}

.ma6 {
	margin: 6px;
}

.mt6 {
	margin-top: 6px;
}

.mr6 {
	margin-right: 6px;
}

.mb6 {
	margin-bottom: 6px;
}

.ml6 {
	margin-left: 6px;
}

.ma7 {
	margin: 7px;
}

.mt7 {
	margin-top: 7px;
}

.mr7 {
	margin-right: 7px;
}

.mb7 {
	margin-bottom: 7px;
}

.ml7 {
	margin-left: 7px;
}

.ma8 {
	margin: 8px;
}

.mt8 {
	margin-top: 8px;
}

.mr8 {
	margin-right: 8px;
}

.mb8 {
	margin-bottom: 8px;
}

.ml8 {
	margin-left: 8px;
}

.ma9 {
	margin: 9px;
}

.mt9 {
	margin-top: 9px;
}

.mr9 {
	margin-right: 9px;
}

.mb9 {
	margin-bottom: 9px;
}

.ml9 {
	margin-left: 9px;
}

.ma10 {
	margin: 10px;
}

.mt10 {
	margin-top: 10px;
}

.mr10 {
	margin-right: 10px;
}

.mb10 {
	margin-bottom: 10px;
}

.ml10 {
	margin-left: 10px;
}

.ma15 {
	margin: 15px;
}

.mt15 {
	margin-top: 15px;
}

.mr15 {
	margin-right: 15px;
}

.mb15 {
	margin-bottom: 15px;
}

.ml15 {
	margin-left: 15px;
}

.ma20 {
	margin: 20px;
}

.mt20 {
	margin-top: 20px;
}

.mr20 {
	margin-right: 20px;
}

.mb20 {
	margin-bottom: 20px;
}

.ml20 {
	margin-left: 20px;
}

.ma25 {
	margin: 25px;
}

.mt25 {
	margin-top: 25px;
}

.mr25 {
	margin-right: 25px;
}

.mb25 {
	margin-bottom: 25px;
}

.ml25 {
	margin-left: 25px;
}

.ma30 {
	margin: 30px;
}

.mt30 {
	margin-top: 30px;
}

.mr30 {
	margin-right: 30px;
}

.mb30 {
	margin-bottom: 30px;
}

.ml30 {
	margin-left: 30px;
}

.ma35 {
	margin: 35px;
}

.mt35 {
	margin-top: 35px;
}

.mr35 {
	margin-right: 35px;
}

.mb35 {
	margin-bottom: 35px;
}

.ml35 {
	margin-left: 35px;
}

.ma40 {
	margin: 40px;
}

.mt40 {
	margin-top: 40px;
}

.mr40 {
	margin-right: 40px;
}

.mb40 {
	margin-bottom: 40px;
}

.ml40 {
	margin-left: 40px;
}

.ma45 {
	margin: 45px;
}

.mt45 {
	margin-top: 45px;
}

.mr45 {
	margin-right: 45px;
}

.mb45 {
	margin-bottom: 45px;
}

.ml45 {
	margin-left: 45px;
}

.ma50 {
	margin: 50px;
}

.mt50 {
	margin-top: 50px;
}

.mr50 {
	margin-right: 50px;
}

.mb50 {
	margin-bottom: 50px;
}

.ml50 {
	margin-left: 50px;
}

/*60~100 [10step]*/

.ma60 {
	margin: 60px;
}

.mt60 {
	margin-top: 60px;
}

.mr60 {
	margin-right: 60px;
}

.mb60 {
	margin-bottom: 60px;
}

.ml60 {
	margin-left: 60px;
}

.ma70 {
	margin: 70px;
}

.mt70 {
	margin-top: 70px;
}

.mr70 {
	margin-right: 70px;
}

.mb70 {
	margin-bottom: 70px;
}

.ml70 {
	margin-left: 70px;
}

.ma80 {
	margin: 80px;
}

.mt80 {
	margin-top: 80px;
}

.mr80 {
	margin-right: 80px;
}

.mb80 {
	margin-bottom: 80px;
}

.ml80 {
	margin-left: 80px;
}

.ma90 {
	margin: 90px;
}

.mt90 {
	margin-top: 90px;
}

.mr90 {
	margin-right: 90px;
}

.mb90 {
	margin-bottom: 90px;
}

.ml90 {
	margin-left: 90px;
}

.ma100 {
	margin: 100px;
}

.mt100 {
	margin-top: 100px;
}

.mr100 {
	margin-right: 100px;
}

.mb100 {
	margin-bottom: 100px;
}

.ml100 {
	margin-left: 100px;
}

/*Class for setting padding*/

.pa0 {
	padding: 0;
}

.pt0 {
	padding-top: 0;
}

.pr0 {
	padding-right: 0;
}

.pb0 {
	padding-bottom: 0;
}

.pl0 {
	padding-left: 0;
}

.pa1 {
	padding: 1px;
}

.pt1 {
	padding-top: 1px;
}

.pr1 {
	padding-right: 1px;
}

.pb1 {
	padding-bottom: 1px;
}

.pl1 {
	padding-left: 1px;
}

.pa2 {
	padding: 2px;
}

.pt2 {
	padding-top: 2px;
}

.pr2 {
	padding-right: 2px;
}

.pb2 {
	padding-bottom: 2px;
}

.pl2 {
	padding-left: 2px;
}

.pa3 {
	padding: 3px;
}

.pt3 {
	padding-top: 3px;
}

.pr3 {
	padding-right: 3px;
}

.pb3 {
	padding-bottom: 3px;
}

.pl3 {
	padding-left: 3px;
}

.pa4 {
	padding: 4px;
}

.pt4 {
	padding-top: 4px;
}

.pr4 {
	padding-right: 4px;
}

.pb4 {
	padding-bottom: 4px;
}

.pl4 {
	padding-left: 4px;
}

.pa5 {
	padding: 5px;
}

.pt5 {
	padding-top: 5px;
}

.pr5 {
	padding-right: 5px;
}

.pb5 {
	padding-bottom: 5px;
}

.pl5 {
	padding-left: 5px;
}

.pa6 {
	padding: 6px;
}

.pt6 {
	padding-top: 6px;
}

.pr6 {
	padding-right: 6px;
}

.pb6 {
	padding-bottom: 6px;
}

.pl6 {
	padding-left: 6px;
}

.pa7 {
	padding: 7px;
}

.pt7 {
	padding-top: 7px;
}

.pr7 {
	padding-right: 7px;
}

.pb7 {
	padding-bottom: 7px;
}

.pl7 {
	padding-left: 7px;
}

.pa8 {
	padding: 8px;
}

.pt8 {
	padding-top: 8px;
}

.pr8 {
	padding-right: 8px;
}

.pb8 {
	padding-bottom: 8px;
}

.pl8 {
	padding-left: 8px;
}

.pa9 {
	padding: 9px;
}

.pt9 {
	padding-top: 9px;
}

.pr9 {
	padding-right: 9px;
}

.pb9 {
	padding-bottom: 9px;
}

.pl9 {
	padding-left: 9px;
}

/*60~100 [5step]*/

.pa10 {
	padding: 10px;
}

.pt10 {
	padding-top: 10px;
}

.pr10 {
	padding-right: 10px;
}

.pb10 {
	padding-bottom: 10px;
}

.pl10 {
	padding-left: 10px;
}

.pa15 {
	padding: 15px;
}

.pt15 {
	padding-top: 15px;
}

.pr15 {
	padding-right: 15px;
}

.pb15 {
	padding-bottom: 15px;
}

.pl15 {
	padding-left: 15px;
}

.pa20 {
	padding: 20px;
}

.pt20 {
	padding-top: 20px;
}

.pr20 {
	padding-right: 20px;
}

.pb20 {
	padding-bottom: 20px;
}

.pl20 {
	padding-left: 20px;
}

.pa25 {
	padding: 25px;
}

.pt25 {
	padding-top: 25px;
}

.pr25 {
	padding-right: 25px;
}

.pb25 {
	padding-bottom: 25px;
}

.pl25 {
	padding-left: 25px;
}

.pa30 {
	padding: 30px;
}

.pt30 {
	padding-top: 30px;
}

.pr30 {
	padding-right: 30px;
}

.pb30 {
	padding-bottom: 30px;
}

.pl30 {
	padding-left: 30px;
}

.pa35 {
	padding: 35px;
}

.pt35 {
	padding-top: 35px;
}

.pr35 {
	padding-right: 35px;
}

.pb35 {
	padding-bottom: 35px;
}

.pl35 {
	padding-left: 35px;
}

.pa40 {
	padding: 40px;
}

.pt40 {
	padding-top: 40px;
}

.pr40 {
	padding-right: 40px;
}

.pb40 {
	padding-bottom: 40px;
}

.pl40 {
	padding-left: 40px;
}

.pa45 {
	padding: 45px;
}

.pt45 {
	padding-top: 45px;
}

.pr45 {
	padding-right: 45px;
}

.pb45 {
	padding-bottom: 45px;
}

.pl45 {
	padding-left: 45px;
}

.pa50 {
	padding: 50px;
}

.pt50 {
	padding-top: 50px;
}

.pr50 {
	padding-right: 50px;
}

.pb50 {
	padding-bottom: 50px;
}

.pl50 {
	padding-left: 50px;
}

/*60~100 [10step]*/

.pa60 {
	padding: 60px;
}

.pt60 {
	padding-top: 60px;
}

.pr60 {
	padding-right: 60px;
}

.pb60 {
	padding-bottom: 60px;
}

.pl60 {
	padding-left: 60px;
}

.pa70 {
	padding: 70px;
}

.pt70 {
	padding-top: 70px;
}

.pr70 {
	padding-right: 70px;
}

.pb70 {
	padding-bottom: 70px;
}

.pl70 {
	padding-left: 70px;
}

.pa80 {
	padding: 80px;
}

.pt80 {
	padding-top: 80px;
}

.pr80 {
	padding-right: 80px;
}

.pb80 {
	padding-bottom: 80px;
}

.pl80 {
	padding-left: 80px;
}

.pa90 {
	padding: 90px;
}

.pt90 {
	padding-top: 90px;
}

.pr90 {
	padding-right: 90px;
}

.pb90 {
	padding-bottom: 90px;
}

.pl90 {
	padding-left: 90px;
}

.pa100 {
	padding: 100px;
}

.pt100 {
	padding-top: 100px;
}

.pr100 {
	padding-right: 100px;
}

.pb100 {
	padding-bottom: 100px;
}

.pl100 {
	padding-left: 100px;
}

/*@end*/

/*@group parts*/

/*@group overwrite bootstrap4*/

.btn {
	font-size: 0.95rem;
}

.btn {
	outline: none;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-transform: none;
	  /*mtx*/
	border-radius: 5px 5px 5px 5px;
	  /*mtx*/
	margin: 5px 10px 5px 0;
	padding: 4px 12px;
	overflow: hidden;
	  /*2020-01-28*/
	opacity: 1;
}

.btn {
	background: none;
}

.btn:focus {
	color: #111;
	background-color: #eee;
}

.btn:hover {
	/*	background-color: #red;*/
}

.btn-circle {
	border-radius: 100% !important;
	width: 40px;
	height: 40px;
	padding-top: 4px;
}

/*@end*/

:root {
	--a-button-bg: #fff;
	--a-button-color: #333;
	--a-button-bg-hover: #aaa;
}

/*@group リンクボタン（アイコン付）*/

a.link {
	/*background-color: #e4edf4;*/
	background-color: var(--a-button-bg);
	border: 1px solid #ccc !important;
}

a.scroll, a.scroll-down, a.scroll-up {
	background-color: var(--a-button-bg);
	border: 1px solid #ccc !important;
}

a.link, a.scroll, a.scroll-down, a.scroll-up {
	position: relative;
	display: inline-block;
	padding: 0.4em 2.4em 0.4em 1.2em;
	background-color: var(--a-button-bg);
	color: var(--a-button-color);
	text-decoration: none;
	border-radius: 20px;
	font-weight: 400;
	transition: background-color 0.3s;
	margin: .2em;
	font-size: 0.95rem;
}

a.link:hover, a.scroll:hover, a.scroll-down:hover, a.scroll-up:hover {
	background-color: var(--a-button-bg-hover);
}

a.link:after, a.scroll:after, a.scroll-down:after, a.scroll-up:after {
	content: "";
	position: absolute;
	top: 50%;
	right: .6em;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-size: contain;
}

a.link:after {
	background: url("img/icon/peak-right.png") no-repeat center center;
}

a.scroll:after, a.scroll-down:after {
	background: url("img/icon/arrow-down.png") no-repeat center center;
}

a.scroll-up:after {
	background: url("img/icon/arrow-up.png") no-repeat center center;
}

/*@end*/

/*@group 共通の丸いスクロールボタン*/

/*top-carousel内や各所に使われている*/

a.scroll-circle {
	width: 48px;
	height: 48px;
	background-color: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

a.scroll-circle:hover {
	background-color: rgba(128, 128, 128, 0.5);
	transition: background-color 0.8s ease;
}

a.scroll-circle span.peak-down {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("img/icon/peak-down.png") no-repeat center center;
	background-size: contain;
}

/*@end*/
/*EFFECT MOVING*/
/*when scrolling, if object is in view, add or remove class
by javascript*/
/*.fadein {
	opacity: 0.1;
	transform: translate(0, 20px);
	transition: all 2000ms;
}

.fadein.scrollin {
	opacity: 1;
	transform: translate(0, 0px);
}*/
/* アニメーション開始前の状態（非表示・透明） */

.fadein {
	opacity: 0;
	transition: opacity 0.8s ease-out;
	  /* 透明度を0.8秒かけてゆっくり変化させる */
}

/* スクロールで表示された後の状態（表示・不透明） */

.fadein.scrollin {
	opacity: 1;
}

/* アニメーション開始前の状態（下から少しずれている・透明） */

.slidein {
	opacity: 0;
	transform: translateY(50px);
	  /* 元の位置より50px下にずらす */
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	  /* 透明度と位置を0.7秒かけて変化させる */
}

/* スクロールで表示された後の状態（元の位置に戻る・不透明） */

.slidein.scrollin {
	opacity: 1;
	transform: translateY(0);
	  /* 元の位置に戻す */
}

/*room,cuisine*/

div.photo-gallery .carousel-caption {
	background-color: rgba(128, 128, 128, 0.6);
	height: 30px;
	bottom: 0%;
	font-size: 15px;
	z-index: 1;
	padding-top: 5px;
	padding-left: 0;
	color: #fff;
}

/*select image button*/

.btn-img {
	width: 100px;
	height: 75px;
	border: none;
	margin-top: 6px;
	margin-right: 2px;
	object-fit: contain;
	  /*hold aspect.*/
	  /*if image should be trimed, use cover.*/
	border: 1px solid #eee;
}

@media screen and (max-width: 480px) {
	.btn-img {
		width: 80px;
		height: 60px;
	}
}

@media screen and (max-width: 360px) {
	.btn-img {
		width: 23%;
		height: 23%;
	}
}

/*for top carousel--------------------------*/
/*title text in #top-carousel*/

#top-carousel .carousel-caption p, .carousel-caption h3 {
	color: #fff;
}

#top-carousel .carousel-caption h3 {
	font-size: 48px;
}

/*title text with shadow in #top-carousel*/

#top-carousel .carousel-caption p, #top-carousel .carousel-caption h3 {
	text-shadow: 0px 0px 5px #000;
}

/*vertical position of title text*/

#top-carousel .carousel-caption {
	top: 35%;
}

@media (max-width: 567px) {
	#top-carousel .carousel-caption {
		top: 45%;
	}
}

/* @group overwrite basic_button.css*/

/*不要になった　2025-07-12*/
/*#top-carousel .btn-circle {
	width: 48px;
	height: 48px;
	border: none;
	color: #666;
	background-color: rgba(255, 255, 255, 0.5);
}
#top-carousel .btn-circle:focus,
#top-carousel .btn-circle:hover {
	color: #999;
	outline: none;
	background: rgba(255, 255, 255, 0.3);
}

#top-carousel .fa-angle-down{
	font-size: 25px;
	padding-top: 10px;
}*/

/*@end*/

/*@group carousel-----common-----*/

#top-carousel .carousel-item img {
	width: 100%;
	border: none;
	padding: 0;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
}

@media (min-width: 801px) and (max-width: 1000px) {
	#top-carousel .carousel-item img {
		/*height: 100vh;*/
		overflow: hidden;
		object-fit: cover;
		height: 80%;
	}
}

@media (max-width: 800px) {
	#top-carousel .carousel {
		max-height: none;
	}
	
	#top-carousel .carousel-item img {
		/*height: 100vh;*/
		height: 96vh;
		overflow: hidden;
		object-fit: cover;
	}
}

/*@end*/

/*@group bootstrapのa.btnを利用したアコーディオン*/

/*——————————————————————————*/

.btn.btn-acc, .btn.btn-faq {
	width: 100%;
	background-color: #f6f6f6;
	padding-top: 6px;
	padding-bottom: 6px;
	border-radius: 20px;
	border: 1px solid #ddd;
	margin-top: 4px;
	margin-bottom: 4px;
}

.btn.btn-acc:hover, .btn.btn-faq:hover {
	background-color: #eee;
}

.acc-text, .faq-text, .spec-text {
	text-align: left;
	padding: 20px;
	background-color: #fff;
}

.acc-text p, .acc-text span {
	/*font-size:1.0rem;*/
	font-size: 0.9rem;
}

.collaspe-area {
	padding: 20px;
	border: 2px solid #868686;
}

/*according button test 2019/02*/
/*if class is btn-acc, add "+" after button text. while opening accordion, + will be changed to -*/
/*changed: for quality, now image instead of text. 2019-02-20*/
/*does not work in chrome or firefox*/
/* font-family: "Font Awesome 5 Free";
	  content: "\f078";*/
/*changed:SVG version 2022/08/05*/
/*a.btn-acc[data-toggle="collapse"]::after, a.btn-faq[data-toggle="collapse"]::after,
a.btn-acc[aria-expanded=true]::after, a.btn-faq[aria-expanded=true]::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-size: contain;
	position: relative;
	top: 4px;
	left: 10px;
}*/

a.btn-acc[data-toggle="collapse"]::after, a.btn-acc[aria-expanded=true]::after, a.btn-faq[data-toggle="collapse"]::after, a.btn-faq[aria-expanded=true]::after {
	content: " ";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-size: contain;
	vertical-align: middle;
	position: relative;
	top: -2px;
	left: 10px;
	  /*	margin:8px;*/
}

a.btn-acc[data-toggle="collapse"]::after, a.btn-faq[data-toggle="collapse"]::after {
	background: url("img/circle-plus.svg") no-repeat;
}

a.btn-acc[aria-expanded=true]::after, a.btn-faq[aria-expanded=true]::after {
	background: url("img/circle-minus.svg") no-repeat;
}

@end;
details {
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 0.5em 1em;
	margin-bottom: 1em;
	background-color: #f9f9f9;
	transition: all 0.3s ease;
}

summary {
	font-weight: bold;
	cursor: pointer;
	position: relative;
	list-style: none;
}

summary::marker {
	display: none;
	  /* Chrome対応 */
}

summary::before {
	content: '▶';
	display: inline-block;
	margin-right: 0.5em;
	transform: rotate(0deg);
	transition: transform 0.2s ease;
}

details[open] summary::before {
	transform: rotate(90deg);
}

.details-content {
	margin-top: 1em;
	padding-left: 1.5em;
	color: #333;
}

/*2025-07-12
AIにサポートされてオリジナルで作成*/

:root {
	/*  --a-button-bg: #e2e4eb;
	  --a-button-color: #333;
	  --a-button-bg-hover: #bbb;*/
	--button-acc-bg: #fff;
	--button-acc-fcolor: #222;
}

/*@group Accordion button*/

button.accordion-header {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	padding: .4em 2em .4em 2em;
	cursor: pointer;
	  /*background: #f9f9f9;*/
	background: var(--button-acc-bg);
	  /*border: 1px solid #ddd;*/
	box-shadow: 0px 2px 2px #ccc;
	border: 1px solid #bbb;
	border-radius: 2em;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	margin-left: 1em;
	outline: none;
}

button.accordion-header {
	/*border: none;*/
	color: var(--button-acc-fcolor);
}

button.accordion-header * {
	font-size: 14px !important;
	font-weight: 400;
	padding: 0;
	margin: 0;
}

button.accordion-header:hover {
	background: #ccc;
	box-shadow: none;
	transition: background 0.3s ease;
}

button.accordion-header::after {
	content: "";
	position: absolute;
	right: 2em;
	width: 1.5em;
	height: 1.5em;
	background-image: url("img/icon/circle-plus.svg");
	background-size: contain;
	background-repeat: no-repeat;
	transition: background-image 0.3s ease;
}

button.accordion-header[aria-expanded="true"]::after {
	background-image: url("img/icon/circle-minus.svg");
	  /*background-image: url("img/peak_down.png");*/
}

.accordion-content, .accordion-content * {
	/*width: 90%;*/
	font-size: 14px;
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
	padding: 0 2em;
	border: 1px solid #ddd;
	border: none;
	border-radius: 0 0 10px 10px;
	background: #fff;
}

.accordion-content.open {
	padding-top: 0em;
	padding-bottom: 3em;
}

/*@end*/

:root {
	--a-button-bg: #e2e4eb;
	--a-button-color: #333;
	--a-button-bg-hover: #bbb;
	--button-acc-bg: #efefef;
}

.border-b, h2, h3 {
	/*base*/
	  /*デフォルト（色クラス付加なし）はグレー（#aaa)*/
	border-bottom: 1px solid #aaa;
}

.border-b.black {
	border-bottom: 1px solid #111 !important;
}

.border-b.dgray {
	border-bottom: 1px solid #777 !important;
}

.border-b.gray {
	border-bottom: 1px solid #aaa !important;
}

.border-b.lgray {
	border-bottom: 1px solid #ddd !important;
}

.border-b.white {
	border-bottom: 1px solid #fff !important;
}

/*outline color*/

.border-dgray, .ol-dgray {
	border: 1px solid #777 !important;
}

.border-gray, .ol-gray {
	border: 1px solid #aaa !important;
}

.border-dgray, .ol-lgray {
	border: 1px solid #ccc !important;
}

.border-llgray, .ol-llgray {
	border: 1px solid #eee !important;
}

.border-none, .ol-none {
	border: none !important;
}

.border {
	border: 1px solid #ccc !important;
}

/*bootstrap4 has boder-bottom*/
/*.border-bottom {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px solid gray;
}*/
/*.border-bottom {/*base*!/
	border-bottom: 1px solid black;
	
	.dgray {
	border-bottom: 1px solid #777;
	}
	.gray {
	border-bottom: 1px solid #aaa;
	}
	.lgray {
	border-bottom: 1px solid #ddd;
	}
	.white {
	border-bottom: 1px solid #fff;
	}	

}*/
/* @border */
/*.border-gray {
	display: block;
	border: 1px solid gray;
}*/

/* @end */

.info-box {
	background-color: rgba(255, 255, 255, 0.6);
	padding: .5rem 1.5rem;
	border: 1px dotted #bbb;
	border-radius: 5px;
	opacity: 1;
	  /*opacity of contents (text etc.)*/
	margin: 16px 0;
	  /*-moz-border-radius: 5px;
		-webkit-border-radius: 5px;x
		-o-border-radius: 5px;
		-ms-border-radius: 5px;*/
}

/* @group span.box-ol ,span.box-reverse*/

span.box-ol, span.box-reverse {
	font-size: 0.96rem;
	font-weight: 400;
}

span.box-ol, span.box-reverse {
	/*line-height: 2.5;*/
	display: inline-flex;
	white-space: nowrap;
	  /*2025-07-18*/
	border-radius: 4px;
	line-height: 1.4;
	padding: 2px 10px;
	margin: 2px 2px 2px 0;
}

span.box-ol, .box-ol {
	border: 1px solid #ccc;
	color: #444;
}

span.box-reverse, .box-reverse {
	background-color: #666;
	color: #fff;
}

/* @end */

/* @group dv.box-ol*/

div.container > div.row > div:has(div.box-ol) {
	padding-top: 30px;
}

div.box-ol {
	padding: 10px 30px;
	border: 1px solid #ddd;
	border-radius: 20px;
	height: 100%;
}

div.box-ol, div.box-reverse {
	border-radius: 12px;
}

/* @end */

/*@end*/

/*@group typography*/

/*typography-setting for this web site*/
/*@import "_typography/font_family_shippori.scss";*/

/* @group base font-family etc */

/*standard font-size for using "rem"*/

/*@group font-size Control with @media */

html {
	/*font-size: 100%; */
	font-size: 82%;
}

@media (min-width: 768px) {
	html {
		/*font-size: 93.75%;*/
	    /* タブレットでは15px */
		font-size: 84%;
	}
}

@media (min-width: 1024px) {
	html {
		/*font-size: 87.5%; */
	    /* PCでは14px */
		font-size: 87.5%;
	}
}

/*@end html*/

/*@group body , p */

*, body, p, .p {
	/*font-size: 1rem;*/
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.05em;
}

body, p, .p {
	line-height: 1.6;
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	margin: 0;
	border: none;
	  /*word-break: break-all;*/
	word-wrap: break-word;
	  /*http://tamasally.hatenablog.com/entry/2014/03/13/005428*/
}

/*@end*/

/*@group h(x) */

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	margin-top: 0.6rem;
	margin-bottom: 0.6rem;
	line-height: 1.8;
}

/*h1,.h1 {font-weight: 700;}
h2,.h2 {font-weight: 700;}
h3,.h3 {font-weight: 600;}*/

h1, .h1 {
	font-size: 1.6rem;
}

h2, .h2 {
	font-size: 1.35rem;
}

h3, .h3 {
	font-size: 1.18rem;
}

h4, .h4 {
	font-size: 1.10rem;
}

h5, .h5 {
	font-size: 1.05rem;
}

/*@end*/

/*@group carousel-caption*/

/*.carousel-caption h3{font-size: 32px;}
	.carousel-caption p{font-size:16px;}*/
/*@media  (max-width: 576px) {

	.carousel-caption h3{font-size: 32px;}
	.carousel-caption p{font-size:16px;}
}*/

/* @end */

/*@group li*/

li {
	list-style-type: none;
}

/* @end */

/*@group eu*/

.eu {
	font-family: 'Crimson Text', serif;
	letter-spacing: 0.07em;
	line-height: 1.1;
}

h1.eu, h2.eu, h3.eu, h4.eu, p.eu, span.eu
div.eu {
	font-size: 32px;
	margin-top: .5rem;
	margin-bottom: 1rem;
	padding: 5px;
	font-weight: 200;
}

/*@end*/

/*@end*/

/*@group css for this site only*/

/*css to overwhite the existing default mtx css*/
/*FOOTER--------------------------*/

#office {
	font-size: 16px;
	text-align: center;
}

#contact li {
	display: inline-block;
	padding-bottom: 10px;
	font-size: 14px;
	text-align: center;
}

#sitemap li {
	font-size: 14px;
	text-align: left;
	display: block;
	margin: 0px 0px 0px 0px;
	  /*white-space: nowrap;*/
	  /*自動改行を禁止　for safari*/
}

#sitemap li a {
	display: block;
	text-decoration: none;
	padding: 2px 0px 2px 6px;
	margin: 0px;
}

#sitemap li a:hover {
	color: #333;
}

#sitemap li :hover {
	background-color: #ddd;
}

@media (max-width: 992px) {
	#sitemap li {
		font-size: 12px;
	}
}
/* @group SECTION common */

/*section for scroll button 
between sections*/

section.scroll-section {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

section.standard {
	padding-top: 60px;
	padding-bottom: 60px;
	border-bottom: 1px dotted gray;
}

section#intro {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dotted gray;
}

section {
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px dotted gray;
	padding: 40px 20px;
}

section#head {
	/*head-page.html*/
}

/*I guess this "content-section" is overwrite BS4 or based on grayscale.css
 Im not sure.*/

.content-section {
	padding-top: 20px;
	padding-bottom: 20px;
}

/*mtx*/

.border-section {
	background: #fff;
	padding-top: 10px;
	padding-bottom: 5px;
	border-bottom-style: none;
}

/*"section#intro-section" is used for head part of each page with background image.*/
/*indivisual image is set by <style>tag before page head on each page.*/
/*examle:
background-image: url(https://xxxxx.com/img/xxxxx.jpg);
css setting of bg image is needed before intro-section*/

.intro-section, section#intro-section {
	background-size: cover;
	position: relative;
	  /*height: 100%;*/
	border: none;
	opacity: 0.80;
	background-repeat: no-repeat;
	background-position: center center;
}

.intro-section .white-area, section#intro-section .white-area {
	/*text area in the class "row"*/
	  /*this css setting is to avoid influence of opacity value of bg image. */
	  /*rgb 256 256 256" means white. The end number is the value of bg color opacity */
	background-color: rgba(255, 255, 255, 0.6);
}

/*@group 不要？gnav-item*/

/*.gnav-item {
	display: inline-block;
}

.gnav-item > a {
	/*color: #696969;*!/
	color: black;
	display: block;
	text-decoration: none;
	padding: 5px 12px;
	/*margin: 10px 0;*!/
}

.gnav-item > a:hover {
	/*opacity: 0.6;*!/
	/*background: #e8e8e8;*!/
}*/

/*@end*/
/*------------------------*/

/*@group #drawer basic-layout */

#drawer {
	display: none;
	left: 0;
	position: fixed;
	top: 10px;
	z-index: 40;
}

#drawer.drawer-right {
	left: auto;
	right: 0;
}

/*check box should be hidden*/

.drawer-hidden {
	display: none;
}

/*drawer button*/

#drawer-open {
	/*-webkit-transform: translateX(0);*/
	background: #b6b6b6;
	cursor: pointer;
	display: inline-block;
	height: 48px;
	position: relative;
	  /*transform: translateX(0);*/
	transition: 0.5s ease-in-out;
	  /*vertical-align: middle;*/
	width: 48px;
	border-radius: 5% 5% 5% 5%;
	right: 10px;
}

/*@end*/

/*@group ↓Humburger SIGN 3LINES 初期状態*/

/*humburger sign to open drawer*/

#drawer-open span {
	background: #fff;
	border-radius: 3px;
	display: block;
	height: 4px;
	left: 50%;
	margin: -2px 0 0 -14px;
	position: absolute;
	top: 50%;
	transition: 0.5s ease-in-out;
	width: 28px;
}

/*humburger center line*/

#drawer-open span {
	background: #fff;
	border-radius: 3px;
	display: block;
	height: 4px;
	  /*thickness of humburger lines*/
	left: 50%;
	margin: -2px 0 0 -18px;
	  /*位置調整*/
	position: relative;
	top: 50%;
	transition: 0.5s ease-in-out;
	  /*消える速度*/
	width: 36px;
	  /*width of humburger lines*/
}

/*upper/lower line*/

#drawer-open span::before, #drawer-open span::after {
	/*-webkit-transform: rotate(0);*/
	background: #fff;
	border-radius: 3px;
	content: "";
	cursor: pointer;
	display: block;
	height: 100%;
	left: 50%;
	margin: -2px 0 0 -50%;
	  /*position of lines*/
	position: absolute;
	top: 50%;
	  /*transform: rotate(0);*/
	transition: 0.5s ease-in-out;
	  /*変化速度*/
	width: 100%;
	z-index: 100;
}

#drawer-open span::before {
	/*-webkit-transform: rotate(0);*/
	margin-top: -13px;
	  /*position of upper line*/
	  /*transform: rotate(0);*/
}

#drawer-open span::after {
	/*-webkit-transform: rotate(0);*/
	margin-top: 9px;
	  /*position of lower line*/
	  /*transform: rotate(0);*/
}

/* @end ↑humburger sign*/

/*@group Humberger 3LINES when Drawer is open*/

#drawer-check:checked ~ #drawer-open.drawer-open-fixed span {
	/*to make middle line disappear when drawer is open.*/
	background: rgba(255, 255, 255, 0);
}

/*[::before] is upper line
[::after] is lower line*/
/*上下のラインがクロスするアニメーション*/

#drawer-check:checked ~ #drawer-open.drawer-open-fixed span::before, #drawer-check:checked ~ #drawer-open.drawer-open-fixed span::after {
	margin: -2px 0 0 -20px;
	  /*set POSION of Cross line*/
	width: 40px;
	  /*set LENGTH*/
}

/*rotate animation of upper & lower lines*/

#drawer-check:checked ~ #drawer-open.drawer-open-fixed span::before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#drawer-check:checked ~ #drawer-open.drawer-open-fixed span::after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*set position of close button when drawer is open*/

#drawer.drawer-right #drawer-check:checked ~ #drawer-open.drawer-open-fixed {
	/*if you want to move close button to outside of drawer area, translateX should be 250px*/
	  /*ハンバーガーメニューが右の場合はマイナスの値を設定。
		ハンバーガーメニュー固定（移動しない場合はコメントアウト）*/
	  /*-webkit-transform: translateX(-200px);
		transform: translateX(-200px);*/
	z-index: 99;
	  /*mtx*/
}

/*@end*/

/*@group #drawer-content */

#drawer-close {
	/*outside of drawer will be gray(transparent blk) when drawer is closed*/
	display: none;
	background: #000;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: 1.3s ease-in-out;
	width: 100%;
	z-index: 39;
}

#drawer-content {
	background: #fff;
	  /*set COLOR of background when drawer is open*/
	width: 1200px;
	  /*set width of drawer*/
	max-width: 94%;
	  /*make space on left side. avoid all area of window*/
	height: 100%;
	  /*left: 0;*/
	overflow: auto;
	position: fixed;
	top: 0;
	  /*-webkit-transform: translateX(-105%);*/
	  /*transform: translateX(-105%);*/
	transition: 0.6s ease-in-out;
	  /*set speed of duration when drawer is open*/
	z-index: 40;
}

#drawer.drawer-right #drawer-content {
	-webkit-transform: translateX(100%);
	left: auto;
	right: 0;
	text-align: left;
	  /*text in drawer*/
	transform: translateX(100%);
}

/*@group 外の領域？*/

/*outside area of drawer*/

#drawer-check:checked ~ #drawer-close {
	display: block;
	opacity: 0.4;
}

#drawer-check:checked ~ #drawer-content {
	-webkit-transform: translateX(0);
	box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1);
	transform: translateX(0);
}

/*@end*/
/*@media screen and (min-width: 990px) {
	
}

@media screen and (max-width: 989px) {
	/*If the window width is less than 990, 
	gnav(navigation) will be hidden.*!/
	
	.gnav {
		display: none;/*mtx*!/
	}
	
	#drawer {
		display: block;
	}
}*/

/* @group accordion-menu*/

div.category a {
	font-weight: 700;
	display: block;
	text-decoration: none;
	padding: 4px 0 4px 6px;
}

div.category a:hover {
	background: #ddd;
	color: #111;
	text-decoration: none;
}

.menuList {
	overflow: hidden;
	height: 0;
	transition: height 0.4s ease;
}

.menuList li {
	/*padding: 4px 0 4px 6px;*/
	list-style: none;
}

.menuList li a {
	text-decoration: none;
	color: #333;
	display: block;
	  /*line-height: 1.5;*/
}

.menuList li a:hover {
	background: #ddd;
	color: #111;
}

/*@end*/
/*CSS for buttons that will show when scrolling*/
/*1)buttons that show after scrolling
for bottom navigation menu

/* .scroll_show -------------------------------------*/

ul.scroll_show {
	position: fixed;
	right: 0px;
	bottom: -15px;
	padding: 0px;
	width: 360px;
	list-style: none;
	z-index: 1;
}

/*bottom navigation menu*/

ul.scroll_show li a {
	display: float;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	padding-top: 10px;
	padding-bottom: 14px;
	color: black;
	text-align: center;
	border-radius: 2px;
	display: block;
	float: right;
	margin: .5px;
	list-style: none;
}

ul.scroll_show li a.wide {
	width: 60px;
}

ul.scroll_show li.page-top a {
	background: gray;
	color: white;
}

ul.scroll_show li.page-top .fa {
	color: white;
}

ul.scroll_show li.page-top a:hover {
	background: gray;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

ul.scroll_show li a:hover {
	text-decoration: none;
}

ul.scroll_show li a {
	background: rgba(224, 223, 223, 0.6);
	border: 1px solid #c9c9c9;
}

ul.scroll_show li a:hover, ul.scroll_show li.fa a:hover, ul.scroll_show li.far a:hover {
	background: rgba(255, 255, 255, 0.8);
	transition: 0.5s;
	-webkit-transition: 0.5s;
	border: 1px solid #dedede;
}

ul.scroll_show li .fa, ul.scroll_show li .far {
	font-size: 20px;
	color: gray;
}

/* .scroll_show -------------------------------------*/
/*CSS for buttons that will show when scrolling*/
/*
2)side buttons
for link to reservation page
*/
/* .scroll_show -------------------------------------*/

ul.scroll_show {
	position: fixed;
	right: 0px;
	bottom: -15px;
	padding: 0px;
	width: 360px;
	list-style: none;
	z-index: 1;
}

/*bottom navigation menu*/

ul.scroll_show li a {
	display: float;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: 500;
	padding-top: 10px;
	padding-bottom: 14px;
	color: black;
	text-align: center;
	border-radius: 2px;
	display: block;
	float: right;
	margin: .5px;
	list-style: none;
}

ul.scroll_show li a.wide {
	width: 60px;
}

ul.scroll_show li.page-top a {
	background: gray;
	color: white;
}

ul.scroll_show li.page-top .fa {
	color: white;
}

ul.scroll_show li.page-top a:hover {
	background: gray;
	transition: 0.5s;
	-webkit-transition: 0.5s;
}

ul.scroll_show li a:hover {
	text-decoration: none;
}

ul.scroll_show li a {
	background: rgba(224, 223, 223, 0.6);
	border: 1px solid #c9c9c9;
}

ul.scroll_show li a:hover, ul.scroll_show li.fa a:hover, ul.scroll_show li.far a:hover {
	background: rgba(255, 255, 255, 0.8);
	transition: 0.5s;
	-webkit-transition: 0.5s;
	border: 1px solid #dedede;
}

ul.scroll_show li .fa, ul.scroll_show li .far {
	font-size: 20px;
	color: gray;
}

/* .scroll_show -------------------------------------*/
/* side navigation -------------------------------------*/

ul#side_navi {
	position: fixed;
	right: 0px;
	padding: 0px;
	top: 300px;
	  /*vertical-position of button. instead of top, "bottom" can be used.*/
	list-style: none;
	z-index: 1;
}

ul#side_navi li a {
	display: block;
	width: 40px;
	height: 120px;
	background: rgba(0, 0, 0, 0.4);
	background-repeat: no-repeat;
	background-position: center 0px;
	border: 1px solid white;
}

ul#side_navi li a:hover {
	text-decoration: none;
	  /*    background: #999;*/
	background: rgba(0, 0, 0, 0.6);
}

ul#side_navi .button1 a {
	background-image: url(https://matrix-partners.net/img/scroll/navigation_plan.png);
}

ul#side_navi .button1 a:hover {
	/*	http://blog.nedia.ne.jp/2015/03/26/5079.html
	*/
	opacity: 0.6;
	  /* 透過率50% */
	transition: 0.5s;
	  /* 0.2秒アニメーション */
	-webkit-transition: 0.5s;
	background-image: url(https://matrix-partners.net/img/scroll/navigation_plan.png);
}

ul#side_navi .button2 a {
	background-image: url(https://matrix-partners.net/img/scroll/navigation_check.png);
}

ul#side_navi .button2 a:hover {
	opacity: 0.6;
	  /* 透過率50% */
	transition: 0.5s;
	  /* 0.2秒アニメーション */
	-webkit-transition: 0.5s;
	background-image: url(https://matrix-partners.net/scroll/navigation_check.png);
}

/*@end*/
/*for mtx pages*/
/*for pages that using photo gallery (carousel)*/
/*ROOM*/
/*CUISINE*/
/*made by mtx*/
/*room-type select image button*/
/*cuisine-type select image button*/
/*room,cuisine carousel*/

.btn-img {
	width: 76px;
	height: 76px;
	margin-top: 6px;
	margin-right: 2px;
	object-fit: contain;
	  /*hold aspect. if image should be trimed, use cover.*/
	  /*	background-color: #eaeaea;*/
	border: 1px solid #eee;
}

/*style used in room type carousel*/
/*photo caption*/

.photo-gallery .carousel-caption {
	background-color: rgba(128, 128, 128, 0.5);
	height: 30px;
	bottom: 10%;
	font-size: 16px;
	z-index: 1;
	padding-top: 5px;
	color: #fff;
}

/*for top #branding*/

.circle-1 {
	background: #f66;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	animation: border-animation 5s infinite linear;
	opacity: 1.5;
}

.circle-2 {
	background: #f92;
	border-radius: 80% 30% 50% 50%/50%;
	animation: border-animation 8s infinite linear;
	opacity: .7;
}

.circle-3 {
	background: #fc2;
	border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
	animation: border-animation 3s infinite linear;
	opacity: .7;
}

/* Animation */
@keyframes border-animation {
to {
	transform: rotate(360deg);
}
}

.gra-animation {
	background: linear-gradient(182deg, #3a96d2, #0a5f96, #fbad10, #f58021);
	background-size: 800% 800%;
	-webkit-animation: gradiation-mtx-sky 6s ease infinite;
	-moz-animation: gradiation-mtx-sky 6s ease infinite;
	-o-animation: gradiation-mtx-sky 6s ease infinite;
	animation: gradiation-mtx-sky 6s ease infinite;
}

@-webkit-keyframes gradiation-mtx-sky {
0% {
	background-position: 0% 31%;
}

50% {
	background-position: 100% 70%;
}

100% {
	background-position: 0% 31%;
}
}

@-moz-keyframes gradiation-mtx-sky {
0% {
	background-position: 0% 31%;
}

50% {
	background-position: 100% 70%;
}

100% {
	background-position: 0% 31%;
}
}

@-o-keyframes gradiation-mtx-sky {
0% {
	background-position: 0% 31%;
}

50% {
	background-position: 100% 70%;
}

100% {
	background-position: 0% 31%;
}
}

@keyframes gradiation-mtx-sky {
0% {
	background-position: 0% 31%;
}

50% {
	background-position: 100% 70%;
}

100% {
	background-position: 0% 31%;
}
}

section#branding {
	/*background-position: center center;
		background-size: cover;
		background-image: url("img/slide_wide/slide_grape.jpg");background-color:rgba(255,255,255,0.3);*/
	  /*background-image: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),url("img/slide_wide/slide_grape.jpg");*/
	  /*background-blend-mode: lighten;*/
}

.box-round {
	background: #FFF;
	  /*border-radius:8px;*/
	  /*border-top: 1px solid silver;
		border-bottom: 1px solid silver;*/
}

@media (max-width: 992px) {
	.box-round {
		border-top: none;
		border-bottom: none;
	}
}
/*test 2020-01-28*/

.opacity-0 {
	opacity: 0;
}

.opacity-10 {
	opacity: 0.1;
}

.opacity-20 {
	opacity: 0.2;
}

.opacity-30 {
	opacity: 0.3;
}

.opacity-40 {
	opacity: 0.4;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-60 {
	opacity: 0.6;
}

.opacity-70 {
	opacity: 0.7;
}

.opacity-80 {
	opacity: 0.8;
}

.opacity-90 {
	opacity: 0.9;
}

.opacity-100 {
	opacity: 1;
}

.corner-5 {
	border-radius: 5px;
}

/*mtx*/

.corner-10 {
	border-radius: 10px;
}

/*mtx*/
/*@import "_site_mtx/text.scss";*/
/*@groupfor top page*/
/*TOP page*/

#intro-box h3 {
	font-size: 16px;
}

#intro-box span {
	/*color: #888;*/
	font-size: 13px;
}

@media (max-width: 576px) {
	#intro-box h3 {
		font-size: 13px;
	    /*			margin: 4px 0 4px 0;*/
	}
	
	#intro-box span {
		font-size: 11px;
	    /*display: none;*/
	}
}

.intro-box * {
	margin: 0;
	padding: 0;
}

.intro-box h3 {
	line-height: 1.2;
	margin: 0;
	padding: 0;
}

/*#intro .inner{
	text-align: center;
	height: 90%;
	/*background: rgba(220, 220, 220, 1);*!/
	/*background-color: #eef;*!/
	background-color: #eee;
	color: #333;
	
	margin: 0px -20px -15px 0px;
	padding: 10px 0 0 0;
	@media (max-width: 992px) {
		margin: 10px 0px 0px 0px;
		padding:10px 0 20px 0;
	}
}*/

#intro .inner p {
	color: #333;
}

/*#intro #intro-0 .inner {
	border: none;
	background-color: #eee;
	
}*/

#intro-1, #intro-2, #intro-3, #intro-4 {
	text-align: center;
	min-height: 80px;
}

@media (max-width: 576px) {
	#intro-1, #intro-2, #intro-3, #intro-4 {
		height: 140px;
	}
}
section#support .row, section#marketing .row, section#branding .row {
	position: relative;
}

div.img-box {
	height: 300px;
	  /*background: #eee;*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (max-width: 576px) {
	div.img-box {
		background-size: 100h;
		height: 240px;
	}
}
.img-box .title-box {
	position: relative;
	left: 25%;
	top: 10px;
}

.img-box .title-box h2 {
	padding: 5px 12px 5px 12px;
	background-color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	  /*自動改行を禁止　for safari*/
}

.img-box .catch {
	position: absolute;
	left: 40%;
	top: 120px;
	background-color: rgba(255, 255, 255, 0.75);
	padding: 5px 12px 5px 12px;
}

/*section#support div.img-box {
background: #a8ff78;  /* fallback for old browsers *!/
background: -webkit-linear-gradient(to right, #78ffd6, #a8ff78);  /* Chrome 10-25, Safari 5.1-6 *!/
background: linear-gradient(to right, #78ffd6, #a8ff78); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!/
}

section#marketing div.img-box {
background: #ffe259;  /* fallback for old browsers *!/
background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 *!/
background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!/
}

section#branding div.img-box {
background: #4ECDC4;  /* fallback for old browsers *!/
background: -webkit-linear-gradient(to right, #556270, #4ECDC4);  /* Chrome 10-25, Safari 5.1-6 *!/
background: linear-gradient(to right, #556270, #4ECDC4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!/
}*/

h2 {
	text-align: center;
	padding: 6px 2px;
	margin: .4em 0;
	border: 1px solid #ddd;
	border-radius: 24px;
	background-color: #555;
	color: white;
	font-size: 1.4rem;
}

h3 {
	font-size: 1.1rem;
}

/*@group .standard*/

.standard h2 {
	margin: 1.2em 0 1.2em 0;
}

.standard h3 {
	padding: 4px 24px;
	margin: 1em 0 .4em 0;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #eee;
	color: #333;
}

.standard h3 {
	padding: 2px 24px;
	margin: 1em 0 .4em 0;
	border: 1px solid #ddd;
	border-radius: 20px;
	background-color: #888;
	color: #fff;
}

/*@end*/

/*@group .basic*/

.basic h2, .basic h3 {
	text-align: left;
	border: none;
	border-radius: 0;
	color: #222;
	background: none;
	padding-left: 0;
	margin-left: 0;
}

/*@group 装飾的なもの　*/

h2 span.number, span.number {
	display: inline-flex;
	justify-content: center;
	  /* 横方向中央 */
	align-items: center;
	  /* 縦方向中央 */
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background-color: #888;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	margin: 0 10px 0 0;
	font-family: "Crimson Text", serif;
	font-weight: 600;
	font-style: normal;
	padding-left: 3px;
	  /* ごく微妙に右寄せ */
}

.hl, .highlighter {
	background: linear-gradient(transparent 60%, #ffeabb 70%) !important;
}

.lead {
	/*h1などのタグ内にspan.leadを設定し、リードテキスト*/
	color: #333;
	line-height: 1.6 !important;
	font-size: 1.1rem;
	font-weight: 400;
	border: none;
	border-radius: 0;
	background: none;
}

/*@end*/
/*div:has(div.row){
			padding-top:10px;
}*/
/*div:has(div.container){
			padding-top:0px;
}*/

/* @group .in-ol */

/*bootstrapでレイアウトが崩れないようにグリッド要素に枠線*/

.in-ol {
	position: relative;
	background-color: none;
	border-radius: 12px;
	overflow: hidden;
	z-index: 0;
}

.in-ol::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	bottom: 6px;
	  /*background-color: #eee;*/
	border: 1px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box;
	pointer-events: none;
	z-index: -1;
}

.in-ol {
	padding: 2em;
}

@media (min-width: 768px) {
	.in-ol {
		padding: 1.0em;
	}
}

@media (min-width: 1024px) {
	.in-ol {
		padding: 1.4em;
	}
}

/*@end in-ol */

/*@group in-bg-(color)*/

/* 色別クラス：擬似要素に適用する */

.in-bg-white::before {
	background-color: white !important;
}

.in-bg-white5::before {
	background-color: rgba(255, 255, 255, 0.5) !important;
}

.in-ol.bg-gray::before {
	background-color: #e8e8e8 !important;
}

.in-ol.bg-blue::before {
	background-color: #e0f0ff !important;
}

.in-ol.bg-red::before {
	background-color: #ffe0e0 !important;
}

.in-ol.bg-green::before {
	background-color: #e0ffe0 !important;
}

.in-bg-sky::before {
	background-color: rgba(64, 116, 128, 0.2) !important;
}

.in-bg-sea::before {
	background-color: rgba(64, 91, 128, 0.2) !important;
}

/*@end*/

/*@end*/
/*----------COLOR----------*/
/*font-color*/
/*body {color: #3c3c3c;}*/

body {
	color: #333;
}

a {
	color: gray;
}

.eu {
	color: #ababab;
}

body {
	padding-top: 60px;
}

/*navigation bg color*/

#main-navi {
	background: #eee;
}

/*overwrite button.css*/

.btn-acc {
	background-color: #fff;
}

.btn-sq {
	background-color: #fff;
}

.btn-acc:hover {
	background-color: #eee;
}

/*-------------COLOR-------------*/
/*-------------------------------------------------*/

.btn-color {
	padding: 10px;
	width: 100%;
	border-radius: 30px;
	background-color: #EFFAD2;
	border: none;
}

.btn-color a:hover {
	background: red;
	color: red;
}