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


/*===============================================
　▼ スマホ対応 max-width: 800px ▼
===============================================*/
@media screen and (max-width: 800px){


/*===============================================
　▼ 共通項目 ▼
===============================================*/
body {
	width:100%;
	margin:0;
	padding:0;
	line-height: normal;
	letter-spacing: normal;
	font-size:100%;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
img {
	width:100%;
	margin:0;
	padding:0;
}
li {
	list-style:none;
}


/*===============================================
　▼ PC表示／SP非表示 ▼
===============================================*/
.spnone {
	display:none !important;
}


body{
	font-size: 12px;
}


/*===============================================
　▼ z-index 表示順序 ▼
===============================================*/
#header-bg {
	z-index: -999;
}


/*===============================================
　▼ header ▼
===============================================*/
img#header-bg {
	width: 100%;
	height:100vh;/*画像を画面全体に設定*/
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
header > h4 {
	width: 80%;
	font-family: Georgia, "Times New Roman", Times, "serif";
	font-size: 100%;
	color: #fff;
	text-align: center;
	text-shadow:3px 3px 4px #000000;
	border-bottom: 1px solid #fff;
	position: relative;
	top: 5vh;
	margin: 0 auto;
	padding: 0 0 1vh 0;
	
}


/*===============================================
　▼ ヘッダーナビ ▼
===============================================*/
header > nav {
	width: 100%;
	height: auto;
	margin: 2vh auto;
	padding:0;
}
header > nav > ul {
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding:7% 0;
}
header > nav > ul > li:nth-of-type(3) {
	width: 100%;
	height: auto;
	vertical-align: middle;
	position: relative;
	top: 0vh;
	margin: 0 auto;
	padding: 0;
}
header > nav > ul > li > p {
	width: 100%;
	height: auto;
	color: #fff;
	font-size: 120%;
	text-align: center;
	text-shadow:3px 3px 4px #000000;
	vertical-align: middle;
	margin: 0 auto;
	padding: 5% 0;
}
header > nav > ul > li > h1 {
	font-family: Georgia, "Times New Roman", Times, "serif";
	font-size: 220%;
	color: #fff;
	text-align: center;
	text-shadow:3px 3px 4px #000000;
	vertical-align: middle;
	margin: 0 auto;
	padding: 0;
}
header > nav > ul > li > p:hover {
	background: rgba(204,204,204,0.3);
}


/*===============================================
　▼ ヘッダーメイン見出し ▼
===============================================*/
header > div {
	position: relative;
	top: 0;
	margin: 5vh auto;
	padding: 0;
}
header > div > p {
	font-family: Georgia, "Times New Roman", Times, "serif";
	font-size: 100%;
	color: #fff;
	text-align: center;
	text-shadow:3px 3px 4px #000000;
	margin: 0 auto;
	padding: 0;
}
header > div > h2 {
	font-family: Georgia, "Times New Roman", Times, "serif";
	font-size: 250%;
	color: #fff;
	text-align: center;
	text-shadow:3px 3px 4px #000000;
	position: relative;
	top: 0;
	margin: 0 auto;
	padding: 0;
}
header > aside {
	width:50%;
	margin:0 auto;
	padding:0;
}

header > aside > a,aside > a:hover {
	font-size:100%;
	text-align:center;
	text-decoration:none;
	color:#fff;
}


header > aside > a > p {
	font-weight: bold;
	padding:4% 0;
	background:rgba(204,204,204,0);
	border:2px solid #fff;
}

header > aside > a > p:hover {
	color:#000;
	font-weight: bold;
	background:#ff9900;/*2f2e2e*/
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}

/*===============================================
　▼ スクロール後、ヘッダー固定 ※デザイン ▼
===============================================*/
.clone-nav {
	width: 100% !important;
	height: auto;
	background: #fff;
	box-shadow: 1px 1px 8px #ccc;
	margin: 0 auto;
	padding:1% 0;
}
.clone-nav ul {
	width: 80% !important;
	margin: 0 auto;
}
.clone-nav li {
	width: 15%;
	height: auto;
	vertical-align: middle;
	position: relative;
	top: 0vh;
	margin: 0 auto;
	padding: 0;
	float: left;
}
.clone-nav li:nth-of-type(3) {
	width: 40%;
	height: auto;
	vertical-align: middle;
	position: relative;
	top: 0vh;
	margin: 0 auto;
	padding: 0;
}
.clone-nav li > p {
	width: 100%;
	height: auto;
	color: #000;
	font-size: 120%;
	text-align: center;
	vertical-align: middle;
	margin: 0 auto;
	padding: 5% 0;
}
.clone-nav li > h1 {
	font-family: Georgia, "Times New Roman", Times, "serif";
	font-size: 220%;
	color: #000;
	text-align: center;
	vertical-align: middle;
	margin: 0 auto;
	padding: 0;
}
.clone-nav li > p:hover {
	background: rgba(204,204,204,0.6);
}

  .is-show {
    transform: translateY(0);
  }
/*===============================================
　▼ スクロール後、ヘッダー固定 ※システム ▼
===============================================*/
  .clone-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    transition: .3s;
    transform: translateY(-100%);
  }
  .is-show {
    transform: translateY(0);
  }



/*===============================================
　▼ article ▼
===============================================*/
article {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	
}
/*===============================================
　▼ main-block001 ▼
===============================================*/
#main-block001 {
	width: 90%;
	height: auto;
	margin: 50vh auto;
	padding: 0;
	position: relative;
	top: 0;
}

/*== ▼ 要素の順番入れ替え ここから ▼ ==*/
.flexbox-wrap {
    display:-webkit-box;
  	display: -webkit-flex;
  	display:-ms-flexbox;
  	display: flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.flexbox1 {
  -webkit-box-ordinal-group:2;
  -ms-flex-order:2;
  -webkit-order:2;
  order:2;
}

.flexbox2 {
  -webkit-box-ordinal-group:1;
  -ms-flex-order:1;
  -webkit-order:1;
  order:1;
}
/*== ▲ 要素の順番入れ替え ここまで ▲ ==*/

#main-block001 > div:nth-of-type(odd) {
	width: 100%;
	height: 50vh;
	overflow-y: hidden;
	margin: 0 auto;
	padding: 0;	
}
#main-block001 > div:nth-of-type(odd) img {
	width: 100%;
	margin: 0;
	padding: 0;	
}
#main-block001 > div:nth-of-type(even) {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;	
}
#main-block001 > div:nth-of-type(even) h1 {
	width: 75%;
	color: #000;
	text-align: center;
	font-size: 400%;
	text-shadow:3px 3px 4px #fff;
	margin: 0 auto;
	padding: 2% 0 0 2%;
	align-items:baseline;/*上下中央揃え*/
	justify-content: center; /*左右中央揃え*/
}
#main-block001 > div:nth-of-type(even) > blockquote {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 2%;	
}
#main-block001 > div:nth-of-type(even) > blockquote > p {
	color: #000;
	text-align: center;
	font-size: 100%;
	line-height: 1.8em;
	margin: 0;
	padding: 0;	
}

/*===============================================
　▼ main-block002 ▼
===============================================*/
#main-block002 {
	width: 100%;
	height: auto;
	margin: -40vh 0 0 0;/*block001のmargin-topは50vh*/
	padding: 0;
}
#main-block002 > blockquote {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
div#background-fixed {
    width: 100%;
    height: auto;/*75vh*/
	background: url(../img/main-block002-img001.jpg) repeat-y;/*スマホ時はfixedは使用しない*/
	overflow-x: hidden;
    margin:0 auto;
    padding:0;
}
div#background-fixed > h1 {
    color:#fff;
	text-align: center;
	font-size: 400%;
	text-shadow:3px 3px 4px #000;
    margin:0;
    padding:2% 0 1% 0;
}
#main-block002 > blockquote > div > dl {
	width:90%;
	height:auto;
	margin:0 auto;
	padding:0;
}
#main-block002 > blockquote > div > dl > dt {
	width:100%;
	height:auto;/*50vh*/
	background:rgba(255,255,255,0.4);
	border:1px solid #ccc;
	margin:0 auto;
	padding:0;
}
#main-block002 > blockquote > div > dl > dt > div {
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}
#main-block002 > blockquote > div > dl > dt > aside {
	width:96%;
	height:auto;
	background: #fff;
	margin:2% 0;
	padding:2%;
}
#main-block002 > blockquote > div > dl > dt > aside > h2 {
    color:#000;
	text-align: center;
	font-size: 150%;
	text-shadow:3px 3px 4px #fff;
    margin:0;
    padding:2% 0 2% 0;
}
#main-block002 > blockquote > div > dl > dt > aside > p {
    color:#000;
	text-align: center;
	font-size: 100%;
    margin:0;
    padding:2%;
}


#main-block002 > blockquote > div > dl > dt > aside > div {
	width:100%;
	margin:2% 0;
	padding:0;
}


#main-block002 > blockquote > div > dl > dt > aside > div > a,#main-block002 > blockquote > div > dl > dt > aside > p > div > a:hover {
	font-size:100%;
	text-align:center;
	text-decoration:none;
	color:#fff;
}

#main-block002 > blockquote > div > dl > dt > aside > div > a > p {
	padding:4% 0;
	background:#2f2e2e;
}

#main-block002 > blockquote > div > dl > dt > aside > div > a > p:hover {
	color:#000;
	background:#ff9900;/*2a4268*/
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
/*===============================================
　▼ main-block003 ▼
===============================================*/
#main-block003 {
	width: 80%;
	height: auto;
	margin: 10vh auto;
	padding: 0;
	position: relative;
	top: 0;
}
#main-block003 > h1 {
	color: #000;
	text-align: center;
	font-size: 400%;
	text-shadow:3px 3px 4px #fff;
	margin: 0 auto;
	padding: 2% 0 0 0%;
	align-items:baseline;/*上下中央揃え*/
	justify-content: center; /*左右中央揃え*/
}
#main-block003 > blockquote {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 2% 0;	
}
#main-block003 > blockquote > a {
	text-decoration:none;
}
#main-block003 > blockquote > a > dl {
	width:100%;
	height:auto;/*50vh*/
	background:rgba(255,255,255,0.4);
	border-bottom:5px solid #fff;
	margin:2% auto;
	padding:0;
}
#main-block003 > blockquote > a > dl:hover {
	border-bottom:5px solid #FF9900;
	
}
#main-block003 > blockquote > a > dl > dt {
	width: 100%;
	color: #000;
	margin: 0;
	padding: 0;	
}
#main-block003 > blockquote > a > dl > dd:nth-of-type(1) {
	width: 100%;
	color: #000;
	text-align: right;
	font-size: 90%;
	margin: 0;
	padding: 2% 0;	
}
#main-block003 > blockquote > a > dl > dd:nth-of-type(2) {
	width: 100%;
	color: #000;
	text-align: center;
	font-size: 150%;
	margin: 0;
	padding: 2%;
}
/*===============================================
　▼ footer ▼
===============================================*/
footer {
	width: 100%;
	height: 5vh;
	background: #2f2e2e;
	margin: 0 auto;
	padding:2% 0;	
}
footer > h1 {
	color: #fff;
	text-align: center;
	margin: 0 auto;
	padding:0;	
}



/*===============================================
　▼ 固定ブロック N-PLUS ▼
===============================================*/

#space10 {
	width: 100%;
	height: 30vh;
	margin: 0;
	padding: 0;
}
#nplus-block {
	width: 100%;
	height: auto;
	background: rgba(204,204,204,0.9);/*42,66,104,0.8*/
	margin: 0 auto;
	padding: 0;
	position: fixed;
	bottom: 0;
	z-index: 100;
}
#nplus-block > blockquote {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
#nplus-block > blockquote a {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
#nplus-block > blockquote a > img {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/*== ▼ クリック展開ボタン ▼ ==*/
/*全体*/
.hidden_box {
	width:100%;
    margin: 0 auto;/*2em 0*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
	width: 20%;
    font-weight: bold;
    background: #2a4268;/*efefef*/
    border-radius: 5px;
	border:2px solid #fff;
    cursor :pointer;
    transition: .5s;
	text-align: center;
	color: #fff;
	display: inline-block;
	margin: 0 auto;
    padding:15px;
	position: relative;
	top:-20px ;
}

/*アイコンを表示*/
.hidden_box label:before {
    display: inline-block;
    /*content: '\f078';テキスト前アイコン*/
    font-family: 'FontAwesome';
    padding-right: 5px;
    transition: 0.2s;
	content: "CLOSE ▼";
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #fff;
	border:2px solid #2a4268;
	color: #2a4268;
}

/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before {
    /*content: '\f078';テキスト前アイコン*/
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
	content: "OPEN ▲";
}
.hidden_box input:checked ~ label:before:hover {
	color: #fff !important;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*============================
　　　中身を非表示にしておく
.hidden_box .hidden_show {
    height: 0;
	margin: 0;
    padding: 10px 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
============================*/
.hidden_box .hidden_show {
	margin: 0;
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/*==========================
　　クリックで中身表示
.hidden_box input:checked ~ .hidden_show {
	margin: 0;
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
===========================*/
.hidden_box input:checked ~ .hidden_show {
    height: 0;
	margin: 0;
    padding: 10px 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}



}
/*===============================================
　▲ スマホ対応 max-width: 800px ▲
===============================================*/