@charset "utf-8";
/* top css */

/*TOPページ用loader*/
.loader_top {
position: fixed;
z-index: 7;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: black;
}
.is-loaded .loader_top {
animation-name: loader_fadeOut;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
animation-delay: 2.5s;
animation-fill-mode: forwards;
}
.is-loaded .loader_logo {
animation: loader_fadeIn 1.5s cubic-bezier(0.42, 0, 1, 1) forwards 0.5s,
reset_zindex 0s cubic-bezier(0.42, 0, 1, 1) forwards 4.5s;
}

@keyframes loader_fadeIn {
from {
opacity: 0;
visibility: visible;
filter: blur(5px);
}
to {
opacity: 1;
filter: none;
visibility: visible;
} 
}

@keyframes loader_fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}

@keyframes reset_zindex {
from { 
}
to {
z-index: 1;
} 
}


/*-------------------------------------------------
PV
-------------------------------------------------*/

.header_title_svg {
width: 268px;
height: auto;
margin: 0 auto 30px;
} 
.pv_copy {
font-size: 3.2rem;
font-weight: 500;
color: #fff;
letter-spacing: 0.5em;
text-align: center;
display: block;
white-space: nowrap;
}

@media all and (max-width : 767px ){
.header_title_svg {
width: 180px;
margin: 0 auto 25px;
} 
.pv_copy {
font-size: 1.8rem;
letter-spacing: 0.3em;
}
}


/*-------------------------------------------------
content
-------------------------------------------------*/

.content {
padding: 60px 0 50px;
}

@media all and (max-width : 767px ){
.content {
padding: 30px 0 20px;
}
}

.intro_en {
font-family: "Crimson Text", serif;
font-weight: 400;
font-size: 1.8rem;
color: #8F6D48;
letter-spacing: 0.05em;
line-height: 100%;
margin-bottom: 10px;
}
.intro_copy {
font-size: 3.0rem;
font-weight: 500;
letter-spacing: 0.5em;
margin-bottom: 40px;
}
.intro_txt {
font-size: 1.6rem;
line-height: 200%;
margin-bottom: 50px;
}

@media all and (max-width : 1024px ){
.intro_copy {
font-size: 2.4rem;
letter-spacing: 0.3em;
margin-bottom: 20px;
}
.intro_txt {
font-size: 1.5rem;
line-height: 180%;
margin-bottom: 40px;
}
}

@media all and (max-width : 767px ){
.intro_en {
font-size: 1.2rem;
margin-bottom: 5px;
}
.intro_copy {
font-size: 1.8rem;
letter-spacing: 0.2em;
margin-bottom: 15px;
}
.intro_txt {
font-size: 1.4rem;
margin-bottom: 30px;
}
}

.item_box_wrap {
display: flex;
flex-wrap: wrap;
}
.item_box {
position: relative;
width: calc(33.33333333% - 60px / 3);
margin-right: 30px;
margin-bottom: 40px;
}

@media all and (max-width : 1024px ){
.item_box {
position: relative;
width: calc(33.33333333% - 40px / 3);
margin-right: 20px;
margin-bottom: 30px;
}
}

.item_box:nth-child(3n) {
margin-right: 0px;
}

@media all and (max-width : 820px ){
.item_box {
width: calc(50% - 30px / 2);
margin-right: 30px;
}
.item_box:nth-child(2n) {
margin-right: 0px;
}
.item_box:nth-child(3n) {
margin-right: 30px;
}
.item_box:nth-child(6) {
margin-right: 0px;
}
}

@media all and (max-width : 767px ){
.item_box {
width: calc(50% - 15px / 2);
margin-right: 15px;
margin-bottom: 15px;
}
.item_box:nth-child(3n) {
margin-right: 15px;
}
.item_box:nth-child(6) {
margin-right: 0px;
}
}

.imgbox {
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.imgbox_img {
position: relative;
z-index: 1;
}
.imgbox_img img {
width: 100%;
transition-duration: 0.7s;
}
.imgbox_img::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #000;
opacity: .4;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.img_cap {
position: absolute;
right: 10px;
bottom:10px;
font-family: "Oswald", sans-serif;
font-weight: 500;
color: #fff;
font-size: 2.0rem;
line-height: 100%;
z-index: 3;
}
.item_titlebox {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 500;
letter-spacing: 0.2em;
}
.item_titlebox dt {
font-size: 2.0rem;
margin-bottom: 10px;
line-height: 100%;
transition-duration: 0.5s;
}
.item_titlebox dd {
font-size: 1.2rem;
color: #8E7742;
}
.item_box a:hover .imgbox_img img {
transform: scale(1.05);
transition-duration: 0.7s;
opacity: .8;
}
.item_box a:hover .item_titlebox dt {
color: #8E7742;
transition-duration: 0.5s;
}

@media all and (max-width : 767px ){
.imgbox {
margin-bottom: 10px;
}
.img_cap {
position: absolute;
right: 5px;
bottom:5px;
font-size: 1.2rem;
letter-spacing: 0.05em;
}
.item_titlebox dt {
font-size: 1.4rem;
margin-bottom: 5px;
}
.item_titlebox dd {
font-size: 1.0rem;
}
}