/*ウィンドウ幅が0～479pxの場合にCSSを適用*/
@media screen and (max-width: 479px) {

}

/*ウィンドウ幅が0～767pxの場合にCSSを適用*/
@media screen and (max-width: 767px) {

.icatch {
height: 100vh; /* 全画面表示 */
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-image: url(../../sp/img/home/icatch.jpg);
line-height:2;
}



}

/* PC版 */


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;
}


/* グローバルナビ */

 /* ロゴ追加202310 */
 
 
header{
background-color:rgba(0,0,0,0.8);
height:50px;
width:100%;
padding:0 2%;
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:20px;
}

nav{
}

nav ul{
display:flex;
justify-content:flex-end;
align-items:center;
list-style:none;
}

nav li{
padding: 0 10px;
}

nav li:last-child {
margin-right:15px;
}


 /* アイキャッチ画面 */

.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_pc01.jpg);
}

.src2 {
background-image:url(../img/home/icatch_pc02.jpg);
}

.src3 {
background-image:url(../img/home/icatch_pc03.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;}
}


.message_i {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%; 
height: 55%;
bottom: 0; 
display: block;
position: absolute;
color: #fff;
text-align:center;
padding: 0.5em;
}

.message_i h1{
font-size:35px;
font-weight:bold;
}

 /* メッセージ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:22px;
text-align: center;
line-height: 1.5;
}

.message1 h3{
padding-bottom:20px;
margin-bottom:15px;
font-size:32px;
text-align: center;
line-height: 1.5;
}

.message1 p{
padding:0 10px;
margin: 0 auto;
text-align: center;
line-height: 3.0;
font-size:20px;
}


 /* メッセージ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: 80%;
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: 40px;
padding-bottom: 40px;
font-size:25px;
 /* 
min-height: 120px;
max-width: 700px;
 */
}

.message2 p {
width: 90%;
text-align: center;
margin: 0 auto;
font-size:20px;
line-height:4;
padding-bottom: 40px;
 /* 
max-width: 700px;
 */
}


/* アイテム */

/* R */

.itemR{
background: #000;
padding-top:100px;
padding-bottom: 50px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.itemR h2 {
padding-bottom: 80px;
font-size:25px;
text-align: center;
}

.wrapper_itemR {
width: 90%;
margin: 0 auto;
text-align: center;
display:flex;
flex-wrap:wrap;
}

.inner_iR {
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_iR h3 {
width: 75%;
text-align:middle;
margin: 0 auto;
font-size:22px;
line-height:3;
padding-left: 20px;
padding-bottom: 0px;
}

.inner_iR h2 {
width: 75%;
text-align:middle;
margin: 0 auto;
font-size:18px;
line-height:3;
padding-left: 20px;
padding-bottom: 15px;
}

.inner_iR p {
width: 75%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 40px;
font-size:17px;
line-height:3;
}

.inner_iL {
background: #000;
padding-right: 10px;
padding-left: 15px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_iL p {
width: 60%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-right: 15px;
}

.inner_iL img {
max-width:100%;
height:auto;
}


/* L */

.itemL {
background: #000;
padding-top:100px;
padding-bottom: 50px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.itemL h2 {
padding-bottom: 80px;
font-size:25px;
text-align: center;
}

.wrapper_itemL {
width: 90%;
margin: 0 auto;
text-align: center;
display:flex;
flex-wrap:wrap;
}

.inner_iL {
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_iL h3 {
width: 75%;
text-align:middle;
margin: 0 auto;
font-size:22px;
line-height:3;
padding-left: 20px;
padding-bottom: 0px;
}

.inner_iL h2 {
width: 75%;
text-align:middle;
margin: 0 auto;
font-size:18px;
line-height:3;
padding-left: 20px;
padding-bottom: 15px;
}

.inner_iL p {
width: 75%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 40px;
line-height:3;
font-size:17px;
}

.inner_iR {
background: #000;
padding-right: 10px;
padding-left: 15px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_iR p {
width: 75%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-right: 15px;
}

.inner_iR img {
max-width:100%;
height:auto;
}




 /* ハウツー */

.howto {
background: #000;
padding-top:150px;
padding-bottom: 50px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.howto h2 {
padding-bottom: 80px;
font-size:25px;
text-align: center;
}

.wrapper_h {
width: 90%;
margin: 0 auto;
text-align: center;
display:flex;
flex-wrap:wrap;
}

.inner_hL {
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_hL p {
width: 75%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 40px;
line-height:3;
font-size:17px;
}

.inner_hR {
background: #000;
padding-right: 10px;
padding-left: 15px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_hR p {
width: 60%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-right: 15px;
}

.inner_hR img {
max-width:100%;
height:auto;
}


 /* デザイナー */
 
.designer {
background: #000;
padding-top:100px;
padding-bottom: 50px;
width: 100%;
margin: 0 auto;
text-align: center;
}

.designer h2 {
padding-bottom: 80px;
font-size:25px;
text-align: center;
}

.wrapper_d {
width: 90%;
margin: 0 auto;
text-align: center;
display:flex;
flex-wrap:wrap;
}

.inner_dR {
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_dR h3 {
width: 75%;
text-align:middle;
margin: 0 auto;
font-size:25px;
line-height:3;
padding-left: 40px;
padding-bottom: 15px;
}


.inner_dR p {
width: 75%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 40px;
font-size:17px;
line-height:3;
}

.inner_dL {
background: #000;
padding-right: 10px;
padding-left: 15px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_dL p {
width: 60%;
text-align: left;
margin: 0 auto;
padding-bottom: 5px;
padding-right: 15px;

}

.inner_dL img {
max-width:100%;
height:auto;
}


 /* ホーム ギャラリー */

.h_gallery{
background: #000;
padding-top: 80px;
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: 80px;
font-size:32px;
}

.h_gallery h3 {
width: 75%;
text-align: right;
margin: 0 auto;
text-decoration: none;
font-size:14px;
padding-top: 5px;
padding-right: 0px;
}

.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: 25%;
-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_gL2 {
background: #000;
padding-right: 5px;
padding-left: 5px;
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_gL2 p {
width: 100%;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
}

.inner_gL2 img {
max-width:100%;
height:auto;
}










.inner_gR {
background: #000;
padding-right: 10px;
padding-left: 5px;
width: 25%;
-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;
}







.inner_gR2 {
background: #000;
padding-right: 5px;
padding-left: 5px;
width: 25%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.inner_gR2 p {
width: 100%;
text-align: center;
margin: 0 auto;
padding-bottom: 5px;
}

.inner_gR2 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;
}






