/*ウィンドウ幅が0～479pxの場合にCSSを適用*/
@media screen and (max-width: 479px) {

}

/*ウィンドウ幅が0～767pxの場合にCSSを適用*/
@media screen and (max-width: 767px) {

}

body{
width:100%
background-color:#000;
font-family:'Noto Serif JP', serif,"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size:13px;
color:#fff;
border:0;
margin:0;
padding:0;
}

/* リンク */

a{
color:#fff;
text-decoration:none;
}


/* グローバルナビ */


header{
background-color:rgba(0,0,0,0.8);
height:50px;
width:100%;

position: fixed;/* 固定表示 */
top:0;
left:0;
box-sizing:border-box;
display:flex;
justify-content:space-between;
}

header h1{
font-size:13px;
padding-top:10px;
padding-left:10px;
}

nav{width:100%;}

nav ul{
display:flex;
justify-content:flex-end;
align-items:center;
list-style:none;
}

nav li{
padding: 0 5px;
}

nav li:last-child {
margin-right:5px;
}


 /* アイキャッチ画面 */


.icatch {
height: 100vh; /* 蜈ｨ逕ｻ髱｢陦ｨ遉ｺ */

}

.wrapper_i {
width:100%; 
height:50px;
}

.container {
width:100%; 
height:100%;
position: relative;
}

.image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
background-size: cover;
background-position: center center;
animation: image-switch-animation 15s infinite;
}

.src1 {
background-image:url(../img/home/icatch_sp01.jpg);
}

.src2 {
background-image:url(../img/home/icatch_sp02.jpg);
}

.src3 {
background-image:url(../img/home/icatch_sp03.jpg);
}


.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}


 /* メッセージ1 */
 
.message1{
background: #000;
padding: 110px 0;
width: 100%;
margin: 0 auto;
color: #FFF;
text-align: center;
}

.message1 h2{
padding: 0px 0;
margin-bottom:50px;
font-size:16px;
text-align: center;
line-height: 1.5;
}

.message1 h3{
padding-bottom: 20px;
margin-bottom:20px;
font-size:20px;
text-align: center;
line-height: 1.5;
}

.message1 p{
padding:0 10px;
margin: 0 auto;
text-align: center;
line-height: 4;
}


 /* メッセージ2 */

.message2_bg {
height: 100vh; /* 全画面表示 */
background-image: url(../img/home/home_message2.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
line-height:2;
}

.wrapper_m2 {
height:100%; 
width:100%;
position: relative;
}

.message2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: rgba(22,22,22, 0.5);
width: 90%;
height: 75%;
text-align: center;
border-radius: 5px;
 /* 
max-width: 960px;
 */
}

.message2 h2 {
width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 35px;
padding-bottom: 30px;
font-size:16px;
 /* 
min-height: 120px;
max-width: 700px;
 */
}

.message2 p {
width: 90%;
text-align: center;
margin: 0 auto;
font-size:13px;
line-height:3.5;
padding-bottom: 40px;
 /* 
max-width: 700px;
 */
}


/* Items */

.item{
background: #000;
padding: 50px 0;
width: 100%;
margin: 0 auto;
text-align: center;
}

.item h2 {

width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 20px;
padding-bottom: 40px;
font-size:20px;
}

.item h3 {
width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 0px;
padding-bottom: 25px;
font-size:16px;
}

.item p {
width: 90%;
text-align: center;
margin: 0 auto;
font-size:13px;
line-height:3;
padding-bottom: 40px;
}

.item img {
max-width:100%;
height:auto;
}


/* ハウツー */

.howto{
background: #000;
padding: 50px 0;
width: 100%;
margin: 0 auto;
text-align: center;
}

.howto h2 {

width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 50px;
padding-bottom: 40px;
font-size:16px;
}

.howto h3 {
width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 0px;
padding-bottom: 25px;
font-size:16px;
}

.howto p {
width: 90%;
text-align: center;
margin: 0 auto;
font-size:13px;
line-height:3;
padding-bottom: 40px;
}

.howto img {
max-width:100%;
height:auto;
}


 /* デザイナー */

.designer{
background: #000;
padding-bottom:50px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.designer h2 {
width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top:10px;
padding-bottom: 40px;
font-size:16px;
}

.designer h3 {
width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 0px;
padding-bottom: 25px;
font-size:16px;
}

.designer p {
width: 90%;
text-align: center;
margin: 0 auto;
font-size:13px;
line-height:4;
padding-bottom: 40px;
}

.designer img {
max-width:100%;
height:auto;
}


 /* ホーム ギャラリー */

.h_gallery{
background: #000;
padding-bottom: 40px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.h_gallery h2 {
width: 90%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
text-decoration: none;
padding-top: 10px;
padding-bottom: 50px;
font-size:16px;
}

.h_gallery h3 {
width: 90%;
text-align: right;
margin: 0 auto;
text-decoration: none;
font-size:14px;
padding-top: 5px;
padding-right: 10px;
}

.h_gallery p {
width: 90%;
text-align: center;
margin: 0 auto;
}

.h_gallery img {
max-width:100%;
height:auto;
}

.footer{
background: #000;
padding: 50px 0;
width: 100%;
margin: 0 auto;
color: #FFF;
text-align: center;
}


/* ここから 
ギャラリページ */

.title_g{
background: #000;
padding-top: 100px;
padding-bottom: 50px;
width: 100%;
margin: 0 auto;
color: #FFF;
text-align: center;
}

.gallery {
background: #000;
padding-top:0px;
padding-bottom: 50px;
width: 100%;
margin: 0 auto;
text-align: center;
display:flex;
flex-wrap:wrap;
}

.inner_gL {
background: #000;
padding-right: 5px;
padding-left: 10px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_gL p {
width: 100%;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
}

.inner_gL img {
max-width:100%;
height:auto;
}

.inner_gR {
background: #000;
padding-right: 10px;
padding-left: 5px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_gR p {
width: 100%;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
}

.inner_gR img {
max-width:100%;
height:auto;
}


/* ここから 
コンタクトページ */

input[type="text"], textarea {
width:80%;
display:block;
text-align: center;
margin: 0 auto;
}

input[type="submit"], input[type="reset"], input[type="button"] {
display:block;
width:80%;
height:40px;
text-align: center;
margin: 0 auto;
}

.contact{
background: #000;
padding: 50px 0;
width: 100%;
margin: 0 auto;
text-align: center;
}

.contact h2 {
width: 100%;
text-align: center;
margin: 0 auto;
text-decoration: none;
font-size:16px;
padding-bottom: 50px;
}

.contact h3 {
width: 80%;
text-align: center;
margin: 0 auto;
text-decoration: none;
font-size:14px;
padding-bottom: 30px;
}

.contact h4 {
width: 80%;
text-align: center;
margin: 0 auto;
text-decoration: none;
font-size:14px;
padding-bottom: 40px;
}

.contact p {
width: 80%;
text-align: center;
margin: 0 auto;
padding-bottom: 10px;
}

.title_c{
background: #000;
padding-top: 100px;
padding-bottom: 30px;
width: 100%;
margin: 0 auto;
text-align: center;
}






.block3{
background: #000;
padding: 50px 0;
width: 100%;
margin: 0 auto;
color: #FFF;
text-align: center;
}






