@charset "UTF-8";
/*

全サイト共通初期設定
----------------------------------------
コンテンツ最大幅：1200px
PC: 769px〜
SP: 〜768px

*/



/*
----------------------------------------------------------------------------------------------------
IE11用印刷設定
----------------------------------------------------------------------------------------------------
*/
@page {size: A4;margin: 12.7mm 10.5mm;}
@media print {
	html {width: 1200px;margin: 0 auto;}
}
.printBR {page-break-before: always;}



/*
----------------------------------------------------------------------------------------------------
サイト基本設定
----------------------------------------------------------------------------------------------------
*/
html {
	font-size: 10px;
	line-height: 1.7;
	font-family: sans-serif;
}
@media screen and (max-width: 768px) {
	html {font-size: 8px;}
}

/* コンテンツ最大幅
------------------------------------------------------------*/
.inner {max-width: 1200px;margin: 0 auto;padding: 8rem 0;}
.inner.width100vw {	max-width: none;}

@media screen and (max-width: 768px) {
	.inner {padding: 4rem 0;}
}
@media screen and (max-width: 1199px) {
	.inner {max-width: 96%;}
}

@media screen and (min-width: 769px) {
	.pc {display: block;}
	.sp {display: none !important;}
}
@media screen and (max-width: 768px) {
	.pc {display: none !important;}
	.sp {display: block;}
}

/* 文字サイズ
------------------------------------------------------------*/
body {font-size: 1.6rem;}

/* 
[img]　画像設定
------------------------------------------------------------*/
img {vertical-align: bottom;height: auto;max-width: 100%;}


/* [iframe]　下の隙間を消す
------------------------------------------------------------*/
iframe {vertical-align: bottom;}

/* [a]　基本形
------------------------------------------------------------*/
a {text-decoration: none;}

/* 注意文
--------------------------------------------------*/
.note,
.noteR {font-size: .75rem !important;}
.noteR {text-align: right !important;}

/* [table]　基本設定
------------------------------------------------------------*/
main table {border-collapse: collapse;margin: 0 auto;}

/* [table]　横スクロール .scroll（.scroll2は表以外で使用）
------------------------------------------------------------*/
main div.scroll,
main div.scroll2 {width: 100%;overflow-x: auto;overflow-y: hidden;}
main div.scroll table {	min-width: 1200px; }

@media screen and (max-width: 1200px) {
	main div.scroll:after,
	main div.scroll2:after {color: #000000;font-size: .75rem;content: "表は横にスクロールできます。";	}
	main div.scroll2:after {content: "横にスクロールできます。";	}
}



/*
----------------------------------------------------------------------------------------------------
Yoshida Original
----------------------------------------------------------------------------------------------------
*/

.marginB {margin-bottom: 0 !important;}
.marginB5 {margin-bottom: .5rem !important;}
.marginB10 {margin-bottom: 1rem !important;}
.marginB20 {margin-bottom: 2rem !important;}
.marginB30 {margin-bottom: 3rem !important;}
.marginB40 {margin-bottom: 4rem !important;}
.marginB50 {margin-bottom: 5rem !important;}
.marginB80 {margin-bottom: 8rem !important;}
.marginB100 {margin-bottom: 10rem !important;}
.marginB1em {margin-bottom: 1em !important;}
.marginB-30 {margin-bottom: -3rem !important;}

.marginT {margin-top: 0 !important;}
.marginT10 {margin-top: 1rem !important;}
.marginT20 {margin-top: 2rem !important;}
.marginT30 {margin-top: 3rem !important;}
.marginT40 {margin-top: 4rem !important;}
.marginT50 {margin-top: 5rem !important;}
.marginT1em {margin-top: 1em !important;}
.marginT-10 {margin-top: -1rem !important;}
.marginT-20 {margin-top: -2rem !important;}

.marginL {margin-left: 0 !important;}
.marginL10 {margin-left: 1rem !important;}
.marginL20 {margin-left: 2rem !important;}
.marginL30 {margin-left: 3rem !important;}
.marginL40 {margin-left: 4rem !important;}
.marginL50 {margin-left: 5rem !important;}
.marginL1em {margin-left: 1em !important;}
.marginL-10 {margin-left: -1rem !important;}
.marginL-20 {margin-left: -2rem !important;}
.marginR30 {margin-right: 3rem !important;}

.paddingL {padding-left: 0 !important;}
.paddingL10 {padding-left: 1rem !important;}
.paddingL20 {padding-left: 2rem !important;}
.paddingL30 {padding-left: 3rem !important;}
.paddingL40 {padding-left: 4rem !important;}
.paddingL50 {padding-left: 5rem !important;}
.paddingL100 {padding-left: 10rem !important;}
.paddingL1em {padding-left: 1em !important;}
.paddingL2em {padding-left: 2em !important;}
.paddingL3em {padding-left: 3em !important;}

.paddingLR {padding-left: 0 !important;padding-right: 0 !important;}
.paddingLR10 {padding-left: 1rem !important;padding-right: 1rem !important;}
.paddingLR20 {padding-left: 2rem !important;padding-right: 2rem !important;}
.paddingLR30 {padding-left: 3rem !important;padding-right: 3rem !important;}
.paddingLR40 {padding-left: 4rem !important;padding-right: 4rem !important;}
.paddingLR50 {padding-left: 5rem !important;padding-right: 5rem !important;}
.paddingLR100 {padding-left: 10rem !important;padding-right: 10rem !important;}
.paddingLR1em {padding-left: 1em !important;padding-right: 1em !important;}
.paddingLR2em {padding-left: 2em !important;padding-right: 2em !important;}
.paddingLR3em {padding-left: 3em !important;padding-lerightft: 3em !important;}
@media screen and (max-width: 768px) {
	.paddingLR10,
	.paddingLR20,
	.paddingLR30,
	.paddingLR40,
	.paddingLR50,
	.paddingLR100,
	.paddingLR1em,
	.paddingLR2em,
	.paddingLR3em {padding-left: 0 !important;padding-right: 0 !important;}
}

.paddingT10 {padding-top: 1rem !important;}
.paddingT20 {padding-top: 2rem !important;}
.paddingT30 {padding-top: 3rem !important;}
.paddingT40 {padding-top: 4rem !important;}
.paddingT50 {padding-top: 5rem !important;}
.paddingTB {padding-top: 0 !important;padding-bottom: 0 !important;}
.paddingTB20 {padding-top: 2rem !important;padding-bottom: 2rem !important;}
.paddingTB30 {padding-top: 3rem !important;padding-bottom: 3rem !important;}
.paddingTB40 {padding-top: 4rem !important;padding-bottom: 4rem !important;}
.paddingTB50 {padding-top: 5rem !important;padding-bottom: 5rem !important;}

.paddingB {padding-bottom: 0 !important;}
.paddingB10 {padding-bottom: 1rem !important;}
.paddingB20 {padding-bottom: 2rem !important;}
.paddingB30 {padding-bottom: 3rem !important;}
.paddingB50 {padding-bottom: 5rem !important;}

.height1em {height: 1em !important;}
.height2em {height: 2em !important;}
.height3em {height: 3em !important;}
.height4em {height: 4em !important;}
.height5em {height: 5em !important;}
.height6em {height: 6em !important;}
.height7em {height: 7em !important;}
.height8em {height: 8em !important;}
.height9em {height: 9em !important;}
.height10em {height: 10em !important;}

.centering {text-align: center;margin: 0 auto;}
.clearfix:after {content: "";display: block;clear: both;}
.kome {padding-left: 1em !important;text-indent: -1em !important;}
.kome2 {padding-left: 2em !important;text-indent: -2em !important;}

.blockDiv1 {width: 100%;}
.blockDiv2 {width: 50%;}
.blockDiv3 {width: 33.333333%;}
.blockDiv3-2 {width: 66.666666%;}
.blockDiv4 {width: 25%;}
.blockDiv4-3 {width: 75%;}
.blockDiv5 {width: 20%;}
.blockDiv5-2 {width: 40%;}
.blockDiv5-3 {width: 60%;}
.blockDiv5-4 {width: 80%;}
.blockDiv63per {width: 63%;}
.blockDiv6 {width: 16.666666%;}
.blockDiv7-2 {width: 28.571428%;}
.blockDiv7-5 {width: 71.42857%;}
.blockDiv9-4 {width: 44.444444%;}
@media screen and (max-width: 768px) {
	.blockDiv2,
	.blockDiv3,
	.blockDiv3-2,
	.blockDiv4,
	.blockDiv4-2,
	.blockDiv4-3,
	.blockDiv5,
	.blockDiv5-2,
	.blockDiv5-3,
	.blockDiv5-4,
	.blockDiv63per,
	.blockDiv6,
	.blockDiv7-2,
	.blockDiv7-5,
	.blockDiv9-4 {width: 100% !important;}
}

.fontBold {font-weight: bold !important;}
.fontBoldC {font-weight: bold !important;text-align: center !important;}
.fontRed {color: #FF0000 !important;}
.fontRedBold {color: #FF0000 !important;font-weight: bold !important;}
.fontBlue {color: #3399FF !important;}
.fontBlueBold {color: #3399FF !important;font-weight: bold;}
.fontGreen {color: #009933 !important;}
.fontGreenBold {color: #009933 !important;font-weight: bold !important;}
.fontYellow {color: #FFFF00 !important;}
.fontYellowBold {color: #FFFF00 !important;font-weight: bold;}
.fontPurpleBold {color: #660099 !important;font-weight: bold;}
.fontRedPurpleBold {color: #990066 !important;font-weight: bold;}
.fontGreenBlueBold {color: #006666 !important;font-weight: bold !important;}
.fontGray {color: #999999 !important;}

.fontSmaller1size {font-size: 85% !important;}
.fontLarger1size {font-size: 115% !important;}
.fontMincho {font-family: Mincho, serif;}

.flexBoxC {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.flexBoxR {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.flexBoxL {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.flexBoxB {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexBoxA {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

/* flexBox内のリバース
------------------------------------------------------------*/
.flexBoxReverse {flex-direction: row-reverse;}

/* flexBox内の天地位置
------------------------------------------------------------*/
.alignItemsC {align-items: center;}
.alignItemsFE {align-items: flex-end;}

.BG-white {background-color: #FFFFFF;}
.BG-darkWhite {background-color: #EBEBEB;}
.BG-lightestGray {background-color: #DDDDDD;}
.BG-lightGray {background-color: #4C4C4C;color: #FFFFFF !important;}
.BG-gray {background-color: #333333;color: #FFFFFF !important;}
.BG-lightBlack {background-color: #191919;color: #FFFFFF !important;}
.BG-black {background-color: #0D0D0D;color: #FFFFFF !important;}
.BG-yellow {background-color: #FFFF00;}
.BB-gray {border-bottom: 3px solid #DDDDDD;}

.alignR {text-align: right !important;}
.alignL {text-align: left !important;}
.alignCandL {text-align: left !important;display: inline-block;margin: 0 auto 0 0;}

@media screen and (max-width: 768px) {
	.marginT,
	.marginT10,
	.marginT20,
	.marginT30,
	.marginT40,
	.marginT50,
	.marginT1em,
	.marginT-10,
	.marginT-20 {margin-top: 0 !important;}
	
	.marginL,
	.marginL10,
	.marginL20,
	.marginL30,
	.marginL40,
	.marginL50,
	.marginL1em,
	.marginL-10,
	.marginL-20,
	.marginR30 {margin-left: 0 !important;}
	
	.paddingL,
	.paddingL10,
	.paddingL20,
	.paddingL30,
	.paddingL40,
	.paddingL50,
	.paddingL100,
	.paddingL1em,
	.paddingL2em,
	.paddingL3em {padding-left: 0 !important;}
	
	.paddingT10,
	.paddingT20,
	.paddingT30,
	.paddingT40,
	.paddingT50 {padding-top: 0 !important;}
}

/*YouTubeレスポンシブ
------------------------------------------------------------
┌.flexBoxB or .flexBoxC(一つの場合)
　┌.flexBoxC.youtubeWrapper
　　┌.youtube
  　　<iframe>
------------------------------------------------------------*/
.youtubeWrapper {margin: 0 auto;margin: 0;}
.youtube {position: relative;width: 100%;padding-top: 56.25%;}
.youtube iframe {position: absolute;top: 0;right: 0;width: 100%;height: 100%;}
.youtubeWrapper.w560 {width: 560px;}
.youtubeWrapper.w780 {width: 780px;}
.youtubeWrapper.w750 {width: 750px;}

/*囲み枠
------------------------------------------------------------*/
div.border1-s-LG-p1em {
	border: 1px solid lightGray;
	padding: 1em;
}
div.border1-s-W-p1em {
	border: 1px solid #FFFFFF;
	padding: 1em;
}

/* ハンバーガーメニュー
------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	header nav#header-menu {
		position: fixed;
		top: 0px;
		right: -100vw;
		width: 100vw;
		height: 100vh;
		z-index: 10;
		background-color: #fff;
        transition: all .6s;
		overflow-y: auto; /* メニューが多くなったらスクロールできるように */
	}
	header #nav-bg {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
		visibility: hidden;
		transition: all .6s;
	}
	header nav#header-menu.open {
		right: 0px;
	}
	header #nav-bg.open {
		visibility: visible;
	}
	header nav ul li ul li a:before {
    content: " - ";
}
	header nav ul li a {
		padding: 4px;
		color: #464646;
		display: block;
		text-align: left;
		text-decoration: none;
	}
	.hamburger {
		position: fixed;
		top: 10px;
		right: 20px;
		cursor: pointer;
		width: 40px;
		height: 36px;
		z-index: 10;
		background-color: rgba(255,255,255,0.90);
		padding: 5px;
		border-radius: 3px;
		box-sizing: border-box;
	}
	.hamburger span {
		/*3本の線を作る*/
		transition: all .3s;
		position: absolute;
		height: 2px;
		background-color: #333;
		width: 30px;
		z-index: 10;
	}
	.hamburger span:nth-of-type(1) {
		/*上の線の位置*/
		top: 9px;
	}
	.hamburger span:nth-of-type(2) {
		/*真ん中の線の位置*/
		top: 17px;
	}
	.hamburger span:nth-of-type(3) {
		/*下の線の位置*/
		top: 25px;
	}
	.hamburger.open span:nth-of-type(1) {
		/*openのとき、上の線を右斜めにする*/
		top: 10px;
		transform: translateY(6px) rotate(-33deg);
	}
	.hamburger.open span:nth-of-type(2) {
		/*真ん中の線を消す*/
		opacity: 0;
	}
	.hamburger.open span:nth-of-type(3) {
		/*下の線を左斜めにする*/
		top: 22px;
		transform: translateY(-6px) rotate(33deg);
	}
}