@charset "utf-8";



/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;700&display=swap');


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
0% {left: -200px;}
100% {left: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
0% {opacity: 0;}
100% {opacity: 1;}
}


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

--primary-color: #000;	/*テンプレートのメインまたはアクセントカラー*/
--primary-inverse-color: #8D6E9D;	/*上のprimary-inverse-colorの対として使う色*/

--global-space: 1em;	/*サイト内の余白の一括管理用。画面幅100%＝100vwです。*/
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html { scroll-behavior: smooth;}

html,body {
font-size: 16px;	/*基準となるフォントサイズ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

html, body {
font-size: 16px;	/*基準となるフォントサイズ。*/
}

}/*追加指定ここまで*/


body {
margin: 0 auto;
padding:0;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
-webkit-text-size-adjust: none;
color:#333;	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
line-height: 3;	/*行間*/
max-width:1100px;
background-attachment: fixed;
background-image: url(../images/bg.jpg);
background-color:rgba(255,255,255,0.6);
background-blend-mode:lighten;
background-repeat: no-repeat;
background-size: cover;
background-position: center top;

word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
input {font-size: 1rem;}

/*ul,ol*/
ul,ol {margin-left: 1.5rem;margin-bottom: 1rem;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*sectionが続く場合*/
section + section {
margin-top: 8vw;	/*sectionの上に空けるスペース*/
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {color: inherit;transition: 0.3s;}

a:hover {
text-decoration:none;
}

a:hover img{
opacity: 0.8;	/*マウスオン時に色を80%に薄くする*/
text-decoration:none;
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
padding-left: var(--global-space);	/*左側の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
padding-right: var(--global-space);	/*右側の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
}


/*header（サイトロゴが入った最上部のボックス）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
padding-top: var(--global-space);	/*上側の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
padding-bottom: var(--global-space);	/*下側の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
}

/*TELブロック（header内のaddress）*/
header address {
font-style: normal;
}

/*画面幅901px以上の追加指定*/
@media screen and (min-width:901px) {

/*headerブロック*/
header {
display: flex;	/*直接の子要素を横並びにする*/
justify-content: space-between;
}

}/*追加指定ここまで*/


/*ヘッダー内のロゴ
---------------------------------------------------------------------------*/
#logo a {text-decoration: none;display: block;}

/*ロゴ*/
#logo {
margin: 0;padding: 0 50px 0 0;
font-size: 1.2rem;	/*文字サイズを120%に*/
line-height: 1.5;	/*行間*/
color:#2C506D;
}

/*ロゴを画像にする場合*/
#logo img {
display: block;
max-width: 100%;	/*ロゴ画像の幅*/
}




/*トップページのメイン画像
---------------------------------------------------------------------------*/
#mainimg {
display: flex;	/*直接の子要素を横並びにする*/
}


/*contents（左右のブロックを囲むボックス）
---------------------------------------------------------------------------*/
#contents {
display: flex;	/*直接の子要素を横並びにする*/
gap: var(--global-space);	/*左右のボックスの間に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます。*/
}


/*メインコンテンツ
---------------------------------------------------------------------------*/
main {
flex: 1;
line-height: 1.5;

}

/*h1見出し*/
main h1 {
	padding: 2rem;
	margin-top: 0;
	line-height: 1;
	margin-bottom: 0rem;
	color:#fff;
	position: relative;
	font-size:1.6em;
	letter-spacing:.1em;
	background-image: url(../images/h1.png);
	background-position: bottom;
	background-size: cover;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
/*h2見出し*/
main h2 {
margin-top: 0;line-height: 1;
padding: .5rem 1rem;
margin: 2rem 0 1rem;
background-color:#861A11;
color:#fff;
font-size:1.3em;
}

main h3 {
font-size:1.1em;
font-weight: bold;
padding: 5px .5rem;
margin-bottom: 1em;
border-left: 8px solid #FA1E0E;
}
main h4 {
font-size:1em;
font-weight: bold;
padding: 10px 0px;
margin-bottom: 1em;
border-bottom: 3px solid #FA1E0E;
}
.contents {
background-color:#fff;
padding:1em;

}


/*サブコンテンツ
---------------------------------------------------------------------------*/
/*メニューを囲むブロック*/
#menubar {
order: -1;	/*左側に表示させる。右側がいいならこの１行を削除。*/
width: 230px;	/*幅。お好みで変更して下さい。*/
}

/*メニュー１個あたりの設定*/
#menubar li {
	background-color:#25669c;
	color:#fff;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
	position: relative; /* このaタグを基準に矢印を作成 */
}

#menubar li:hover {
	background-color:#861A11;
	color:#fff;
}
#menubar li a {
padding-left: 35px;	/*左側の余白*/
}


#menubar li:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 7px;
	display: block;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-top: 2px solid #fff; /* 線の太さ */
	border-right: 2px solid #fff; /* 線の太さ */
	transform: rotate(45deg); /* 右向き矢印 */
}

#menubar li a .current {
	background-color:#333;
}


#menubar li:before > a:hover {
	content: '';
	position: absolute;
	top: 50%;
	left: 7px;
	display: block;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-top: 2px solid #f00; /* 線の太さ */
	border-right: 2px solid #f00; /* 線の太さ */
	transform: rotate(45deg); /* 右向き矢印 */
}
  

/*h3見出し*/
#menubar h3 {
margin: 0;
line-height:2;
font-size: 1rem;
background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
color: #fff;	
text-align: center;	/*テキストをセンタリング*/
}




/*メニューブロック初期設定（※変更不要）
---------------------------------------------------------------------------*/
#menubar {opacity: 0;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}
.large-screen #menubar {opacity: 1;}
.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}
#menubar_hdr.display-none {display: none;}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------
/*メニューブロック設定*/
.small-screen #menubar.display-block {
position: fixed;overflow: auto;z-index: 100;
left: 0px;top: 0px;
width: 100%;
height: 100%;
padding-top: 0px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為の指定ですのでお好みで変更OK。*/
color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
background: #333;;	/*背景色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
animation: animation1 0.1s both;
opacity:.95;
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
border-bottom: 1px solid var(--primary-color);	/*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
margin: 0rem;	/*メニューの外側に空けるスペース*/
opacity:1;
font-size:18px;
}
.small-screen #menubar a {
padding: .2rem 3rem;	/*メニュー内の余白。上下、左右へ。*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
position: fixed;z-index: 101;
cursor: pointer;
top: 0px;	/*上からの配置場所*/
right: 0px;	/*右からの配置場所*/
width: 50px;	/*幅*/
height: 50px;	/*高さ*/
padding: 15px;	/*ブロック内の余白*/
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.6);	/*背景色*/
}

/*ここは変更不要*/
#menubar_hdr div {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
display: block;
width: 100%;
height: 2px;	/*線の太さ*/
background-color: #fff;	/*線の色*/
border-radius: 2px;	/*コーナーを少しだけ丸く*/
transition: all 0.2s ease-in-out;
position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer a {color: inherit;text-decoration: none;}
footer .pr {display: block;}

footer {
font-size: 0.8rem;	/*文字サイズ。80%です。*/
text-align: center;	/*内容をセンタリング*/
padding: 1rem 0 ;
color:#666;
line-height:1.2;
}


/*list-normal（service.htmlで使っている２カラムボックス）
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal .list {
display: flex;	/*直接の子要素を横並びにする*/
gap: 2vw;	/*左右の間のマージン的なスペース*/
margin-bottom: var(--global-space);	/*ボックスの下に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます。*/
line-height: 2;	/*行間を少し狭く*/
}

/*テキストブロック*/
.list-normal .text {
flex: 1;
}

/*画像ブロック*/
.list-normal figure {
width: 40%;	/*幅。お好みで。*/
}

/*h4見出し*/
.list-normal h4 {
margin: 0;
margin-bottom: 0.5rem;	/*下に少しスペースをとる*/
font-size: 1.2rem;	/*文字サイズを120%に*/
}

/*説明テキスト*/
.list-normal p {
margin: 0;	
}



/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1テーブルブロック設定*/
.ta1 {
table-layout: fixed;
margin-bottom: 2rem;
}

.ta1, .ta1 td, .ta1 th {
border: 1px solid var(--primary-color);	/*テーブルの枠線の幅、線種、varは色のことでcss冒頭で指定しているprimary-colorを読み込みます。*/
padding: 1rem;	/*ボックス内の余白*/
word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
text-align: left;	/*左よせにする*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
display: block;text-decoration: none;text-align: center;z-index: 99;
position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
right: 20px;	/*右からの配置場所指定*/
bottom: 20px;	/*下からの配置場所指定*/
color: #fff;	/*文字色*/
background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
width: 40px;	/*幅*/
line-height: 40px;	/*高さ*/
}


.adv p {text-align: center !important;margin:10px 0}



/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: red !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb5vw {margin-bottom: 5vw !important;}
.look {display: inline-block;padding: 0px 10px;background: #fff;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 1.5em; }
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

.ws {width: 48%;display: inline;}
.sh {display: none;}
.pc {display: block;}
#logo {
padding: 0;
}

}/*追加指定ここまで*/


/*  Greeting
----------------------------------------------------*/
#gre_area{
	display:flex;
	justify-content: flex-first;
	align-items: flex-end;
	margin-bottom:2em;
}

@media(max-width:768px){
	#gre_area{
		flex-wrap: wrap;
	}
}

img.greeting{
	min-width: 110px;
	max-width: 50%;
	border-radius: 4px;
	order:1;
	margin-right:1em;
}

/* スクリーンサイズが768px以下の場合に適用 */
@media(max-width:768px){
	img.greeting{
		order: 1;
		margin: 0 auto 0;
	max-width: 50%;
		
	}
}

.gre_dl{
	text-align: left;
	order: 1;
	justify-content: center;
	margin-right: 1em;
}

/* スクリーンサイズが768px以下の場合に適用 */
@media(max-width:768px){
	.gre_dl{
		width:100%;
		text-align: center;
		order: 2;
		margin-right: 0;
	}
	
}

.gre_dl strong{
	font-size:1.7rem;
}