@charset "utf-8";

* {box-sizing: border-box;}

/*** マウスオーバー時に画像拡大 ***/
.hoverbig {overflow: hidden; width: 100%; height: auto;}
.hoverbig img {display: block; transition: 0.5s;}
.hoverbig img:hover {transform: scale(1.4, 1.4);}


.main_a {width: 100%; margin: 40px auto 0;}
.waku_container {width: 100%; margin: 0 auto; position: relative;}

.mask1 {width: 100%; height: 320px; position: absolute; top: 137px; left: 0; cursor: pointer; background-color: rgba(255,255,255,0.4); z-index: 1; transition: all 0.5s ease-out;}
.mask1:hover {background-color: rgba(255,255,255,0);}
.mask2 {width: 100%; height: 320px; position: absolute; top: 137px; left: 0; cursor: pointer; background-color: rgba(255,255,255,0.4); z-index: 1; transition: all 0.5s ease-out;}
.mask2:hover {background-color: rgba(255,255,255,0);}
.mask3 {width: 100%; height: 320px; position: absolute; top: 137px; left: 0; cursor: pointer; background-color: rgba(255,255,255,0.7); z-index: 1; transition: all 0.5s ease-out;}
.mask3:hover {background-color: rgba(255,255,255,0);}
.mask4 {width: 100%; height: 320px; position: absolute; top: 137px; left: 0; cursor: pointer; background-color: rgba(255,255,255,0.7); z-index: 1; transition: all 0.5s ease-out;}
.mask4:hover {background-color: rgba(255,255,255,0);}

@media screen and (max-width: 1040px) {.mask1, .mask2, .mask3, .mask4 {top: 103px; height: 225px;}}

.img_left1 {background-image: url("../images/main_a01.jpg"); position: absolute; top: 137px;}
.img_right1 {background-image: url("../images/main_a02.jpg"); position: absolute; top: 137px;}
.img_left2 {background-image: url("../images/main_a03.jpg"); position: absolute; top: 137px;}
.img_right2 {background-image: url("../images/main_a04.jpg"); position: absolute; top: 137px;}

.waku {width: 1040px; height: 520px; margin: 0 auto; position: relative;}
@media screen and (max-width: 1040px) {.waku {width: 100%;}}

.waku .maina01 {width: 100%; max-width: 500px; height: auto; position: absolute; top: 0; left: 0; z-index: 1; padding: 20px;}
.waku .maina02 {width: 100%; max-width: 500px; height: auto; position: absolute; top: 0; right: 0; z-index: 1; padding: 20px;}
.waku .maina03 {width: 480px; height: 300px; position: absolute; top: 0; left: 0; z-index: 1; padding: 20px;}
.waku .maina04 {width: 480px; height: 300px; position: absolute; top: 0; right: 0; z-index: 1; padding: 20px;}

@media screen and (max-width: 1040px) {
	.introduction {width: 96%;}
	.waku {height: 380px;}
	.waku .maina01 {left: 20px;}
	.waku .maina02 {right: 20px;}
}
@media only screen and (max-width:767px){
	.waku .maina01 {left: 50%; transform: translateY(0) translateX(-50%); width: 96%;}
	.waku .maina02 {right: 50%; transform: translateY(0) translateX(50%); width: 96%;}
}


.main_a p {
	font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 3.2em;
    letter-spacing: 2.5px;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    z-index: 1;}
@media screen and (max-width: 1040px) {.main_a p {line-height: 2.6em;}}
@media screen and (max-width: 559px) {.main_a p {line-height: 2.2em;}}

.main_a h2.waku_title {
	font-family: 'Noto Serif JP', serif;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0.25em;
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    position: absolute;
    top: 120px;
    left: 467px;
    z-index: 1;}

@media screen and (max-width: 1040px) {.main_a h2.waku_title {font-size: 1.7rem; top: 80px; left: 0; right: 0;}}
@media screen and (max-width: 559px) {.main_a h2.waku_title {font-size: 1.5rem;}}

.main_a .img_left1, .main_a .img_left2, .main_a .img_right1, .main_a .img_right2 {
	background-position: center center;
    background-size: cover;
    width: 100%;
    height: 320px;
}
@media screen and (max-width: 1040px) {.main_a .img_left1, .main_a .img_left2, .main_a .img_right1, .main_a .img_right2 {top: 103px; height: 225px;}}


/* bootstrap */
.row-ar {display: flex; flex-wrap: wrap;}
.col-12 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
.col-8 {-ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%;}
.col-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
.col-4 {-ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}

@media only screen and (max-width:767px){
	.l-introduction .col-8 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.l-introduction .col-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	.l-introduction .col-4 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
}
@media screen and (max-width: 559px) {
	.col-6 {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
}