@charset "utf-8";


/*PC・タブレット・スマホ(全端末)共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定*/

/*色一覧
first-color #96EBBF
second-color #81dad9
third-color #78b7bb
fourth-color #4b90cf
primary-text-color #212121
secondary-text-color #757575
divider-color #BDBDBD
accent-color #DA8182,#DA81B7
---*/

body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #666666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #ffffff;	/*背景色*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 32px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
  
  display: inline-flex;
  vertical-align: middle;
}

.inlblk {
    display: inline-block;
}

.link{
display: flex;
 justify-content: flex-end;
	}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #008278;	/*リンクテキストの色*/
	transition: 0.6s;	/*マウスオン時の移り変わるまでの時間設定。0.6秒。*/
}
a:hover {
	color: #008278;	/*マウスオン時の文字色*/
}

/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1200px;	/*ブロックの最大幅*/
	margin: 0 auto;
	padding: 0 3%;
	color: #666666;
}


/*パンくずリスト
---------------------------------------------------------------------------*/
.breadcrumb {
  margin-bottom: -35px;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #666666;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}


/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	text-align: left;	/*内容を中央よせ*/
}
/*ロゴ画像設定*/
#logo img {
	width: 300px;	/*画像幅*/
	margin: 30px auto 20px;	/*ロゴの上と下に40pxスペースを空ける設定*/
}


/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {
  list-style:none;

	text-align: center;		/*文字をセンタリング*/
	font-size: 18px;		/*文字サイズ*/
	margin-bottom: 20px;	/*下に空けるスペース*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	display: inline;	/*横並びにする設定*/
}
#menubar li a {
	text-decoration: none;
	padding: 15px 30px;	/*各メニュー内の余白。上下に15px、左右に30pxあけるという意味。*/
}
/*マウスオン時の設定*/
#menubar li a:hover {
	color: #429579;	/*文字色*/
	border-bottom: 4px solid #429579;	/*下線の幅、線種、色*/
}

/*コンテンツ（見出しバーや文字などが入っているブロック）
---------------------------------------------------------------------------*/
/*コンテンツのh2タグの設定*/
/*h2タグ*/
#contents h2 {
	clear: both;
	margin-bottom: 20px;	/*下に空けるスペース*/	
	font-size: 1.4em;		/*文字サイズ*/
	background: #008278;		/*背景色*/
	color: #ffffff;			/*文字色*/
	font-weight: bolder;
	border-left: 50px solid #429579;	/*左の線の幅、線種、色*/
	line-height: 50px;		/*行間*/
	padding-left: 30px;		/*左に空ける余白*/
	margin-top: 2em;
}
/*h2タグ内のspanタグ*/
#contents h2 span {
	font-weight:bolder;
	font-size: 120%;	/*文字サイズ*/
	color: #429579;
	padding-left: 0px	/*左に空ける余白*/
}

/*コンテンツのh3タグの設定*/
#contents h3 {
	font-weight:bolder;
	font-size: 120%;	/*文字サイズ*/
	color: #008278;
}
	
#contents h4 {
	font-weight:bolder;
	font-size: 120%;	/*文字サイズ*/
	color: #004ea2;
}
/*コンテンツのp(段落)タグ設定*/
#contents p {
	padding: 5px 20px 0px;	/*上、左右、下への余白*/
	color: #303030;
}

/*他。微調整。*/
#contents p + p {
	margin-top: -5px;
}
#contents h2 + p{
	margin-top: -10px;
}
#contents h3 + p {
	margin-top: -5px;
}
#contents section + section {
	margin-top: 10px;
	text-decoration: none;
}
.case{
	clear: both;
	margin-bottom: 20px;
	padding: 8px 10px;	/*上下、左右への余白*/
  	background: #f9f9f9;
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
}
.fukidasi{
	position: relative;
	padding: 1rem 1rem;
  	background: #FFFAF0;
	color: #A16E08;
	margin-bottom: 0.5em;
  	/*border: 3px solid #96EBBF;
  	border-radius: 10px;*/
}
/*.fukidasi:before {
  	position: absolute;
  	bottom: -14px;
  	left: 1em;
  	width: 0;
  	height: 0;
  	content: '';
  	border-width: 14px 12px 0 12px;
  	border-style: solid;
  	border-color: #96EBBF transparent transparent transparent;
}

.fukidasi:after {
  	position: absolute;
  	bottom: -10px;
  	left: 1em;
  	width: 0;
  	height: 0;
  	content: '';
  	border-width: 14px 12px 0 12px;
  	border-style: solid;
  	border-color: #f9f9f9 transparent transparent transparent;
}*/

/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*画像ブロック*/
.mainimg {
	border-radius: 0px;	/*角を丸くする指定。*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	position: relative;		/*早退配置*/
	display:inline-block;
    width: 100%;
	
}

.mainimg p {
    position: absolute;
    top: 220px;
    left: 75px;
    margin: 0;
    padding: 0;
    font-size: 260%;
    display: inline-block;
    font-family: 'Hina Mincho', serif;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    color: #666666;
    letter-spacing: 0.4rem;/*冒頭で読み込んだGoogle Fontsを適用する指定*/
}

.mainimg img{
	width: 100%;
}

.flex-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item-box1
{
    width: 450px;
    flex-basis: 450px;
    max-width: 450px;
	margin: 30px;
}
.box1 {
    padding: 0.5em 1em;
    margin: -1em 0em 1.5em 0em;
    font-weight: bold;
    border: solid 3px #666666;
	background: #ffffff;
}
.box1 p {
    margin: 0; 
    padding: 0;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}


/*チェックマーク
---------------------------------------------------------------------------
#contents ul {
  list-style-type: none;
  margin-left: 60px
}
#contents li {
  font-size: 150%;
  position: relative;
  line-height: 3;
}
#contents li::after {
  content: '';
  display: block;
  position: absolute;
  top: 1.2em;
  left: -1.5em;
  width: 10px;
  height: 5px;
  border-left: 3px solid #9c9c9c;
  border-bottom: 3px solid #9c9c9c;
  transform: rotate(-45deg);
}
---------------------------------------------------------------------------*/


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {display: none;}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	z-index: 1;
	position: fixed;
	bottom: 20px;	/*下から20pxの場所に配置*/
	right: 3%;		/*右から3%の場所に配置*/
	background: #008278;	/*背景色（古いブラウザ用）*/
	background: #008278;	/*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
	color: #fff;	/*文字色*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #429579;	/*背景色*/
}


/*商品スペックテーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
#about
.ta1 caption {
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #eee;		/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
	background: #ffffff;		/*背景色*/
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;			/*テーブル内の余白*/
}
/*テーブルの左側ボックス*/
.ta1 th {
	text-align: center;	/*センタリング*/
	width: 30%;			/*幅*/
}

/*コンタクト
---------------------------------------------------------------------------*/
/*問い合わせ先h2タグ内のspanタグ*/
#contact p span {
	font-weight:bolder;
	font-size: 120%;	/*文字サイズ*/
	color: #429579;
	padding-left: 0px	/*左に空ける余白*/
}


/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
.wrapper{
    height: 100%;
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 160px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

footer{
    width: 100%;
    background-color: #004ea2;
    color: #fff;
    text-align: center;
    padding: 50px 0;

    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}


/*画面幅580px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:580px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 12px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
}
	
/*メニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
#menubar li {
	display: block;	/*縦並びにする設定*/
	margin-bottom: 10px;
}
#menubar li a {
	text-decoration: none;
	padding: 8px 30px;	/*各メニュー内の余白。*/
}
	
	
.mainimg {
	border-radius: 0px;	/*角を丸くする指定。*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	position: relative;		/*早退配置*/
	display:inline-block;
	
}

.mainimg p {
    position: absolute;
    top: 80px;
    left: 20px;
    margin: 0;
    padding: 0;
    font-size: 150%;
    display: inline-block;
    font-family: 'Hina Mincho', serif;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    color: #666666;
    letter-spacing: 0.4rem;/*冒頭で読み込んだGoogle Fontsを適用する指定*/
}

.mainimg img{
	width: 100%;
}
	
/*h2タグ*/
#contents h2 {
	border-left: 15px solid #429579;	/*左の線の幅、線種、色*/
	line-height: 35px;
	padding-left: 10px;		/*左に空ける余白*/
}
/*Galleryページ
---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list {
	padding: 10px;	/*ボックス内の余白*/
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.pointicon {
	font-size: 100%;
	line-height: 40px;
	padding: 8px 15px;
	margin: 0px 0px;
	vertical-align: text-top;

}


/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
.wrapper{
    height: 100%;
    min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 75px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

footer{
    width: 100%;
    background-color: #004ea2;
    color: #fff;
    text-align: center;
    padding: 25px 0;

    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/
}

	
}