@charset "utf-8";

@import url('../common.css'); /*←backnumber用共通css*/
@import url("../../webfonts/bradley_hand_itc/stylesheet.css");
@import url("../../webfonts/Anders/stylesheet.css");

.font-Anders {
    font-family: Anders;
}
.font-bradley {
    font-family: "bradley hand itc";
}
.kozuka-gothic { /*Adobeフォントjsで読み込み*/
    font-family: "kozuka-gothic-pr6n", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}
.optima { /*Adobeフォント*/
    font-family: optima-nova-lt-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
}

.inner1200 {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.inner1000 {
    width: 90%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.text_center {
	text-align: center;
}
.text_right {
	text-align: right;
}
.text_left {
	text-align: left;
}
#contents {
    /*margin-top: 150px;*/
}
body{
	overflow: visible;
}


/* ==================================================
   共通
=================================================== */
.collection {
	--garden-bg: #f4f1e7;
	--garden-text: #b17358;
	width: 100%;
	background-color: var(--garden-bg);
	color: #3a3a3a;
	padding-top: 0;
	margin-bottom: 0;
	overflow: clip;
}
.collection * {
    font-family: optima-nova-lt-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.collection section {
    margin-bottom: 8em;
}
.collection img {
	max-width: none;
    width: 100%;
	display: block;
}
.collection_inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4%;
}


/* ==================================================
   P1：メインビジュアル（動きなし）
=================================================== */
.mainV {
    padding-top: 4em;
}
.mainV_pic {
    width: 100%;
    margin-bottom: 3em;
}
.mainV_title {
    color: var(--garden-text);
    text-align: center;
    letter-spacing: .12em;
}
.mainV_title_row1,
.mainV_title_row2 {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2.5em;
    font-size: clamp(20px, 3.4vw, 34px);
    margin-bottom: 1.4em;
}
.mainV_title_row3 {
    font-size: clamp(20px, 3.4vw, 34px);
    margin-top: .2em;
}


/* ==================================================
   P2：ギャラリー（中央固定テキスト／外側→中央スライドイン）
=================================================== */
.sec-1_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    gap: 4%;
}
.sec-1_first {
  padding-bottom: 50%;
}
.sec-1_col {
    width: 44%;
    display: flex;
    flex-direction: column;
    gap: 3em;
}
.sec-1_col-right {
    /*margin-top: 4em;*/
}
.sec-1_pic {
    overflow: hidden;
}
.sec-1_center {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3em;
    white-space: nowrap;
    color: var(--garden-text);
    font-size: clamp(18px, 3vw, 30px);
    z-index: 2;
}
.sec-1_center_item {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .3em;
}
.sec-1_center_item.txt {
    letter-spacing: .15em;
}


/* ==================================================
   P3：フェードイン
=================================================== */
.sec-2_main {
    margin-bottom: 4em;
}
.sec-2_sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6%;
}
.sec-2_sub_pic {
    width: 42%;
}
.sec-2_sub_label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--garden-text);
    letter-spacing: .2em;
    font-size: clamp(15px, 3vw, 26px);
}


/* ==================================================
   P4：フェードイン
=================================================== */
.sec-3_momoko {
    width: 55%;
    margin: 0 auto 4em;
}
.sec-3_momoko_pic {
    margin-bottom: 1em;
}
.sec-3_caption {
    color: var(--garden-text);
    letter-spacing: .1em;
    text-align: left;
    margin-bottom: 1.6em;
    font-size: clamp(15px, 3vw, 26px);
}
.sec-3_bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6%;
}
.sec-3_bottom_pic {
    width: 38%;
}
.sec-3_bottom_label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--garden-text);
    letter-spacing: .2em;
    font-size: clamp(15px, 3vw, 26px);
}


/* ==================================================
   P5：フェードイン＋クレジット
=================================================== */
.sec-4 {
    display: flex;
    align-items: flex-end;
    gap: 4%;
    margin-bottom: 5em;
}
.sec-4_left {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 3em;
}
.sec-4_right {
    flex: 1;
}

.sec-credit {
    width: 100%;
    margin: 0 auto;
    color: var(--garden-text);
    font-family: "kozuka-gothic-pr6n", "Hiragino Kaku Gothic Pro", sans-serif;
}
.sec-credit_row {
    display: flex;
    align-items: flex-start;
}
.sec-credit_row1 {
    margin-bottom: 6em;
}
.sec-credit_year {
    width: 38%;
    flex-shrink: 0;
    font-size: clamp(16px, 1.8vw, 22px);
}
.sec-credit_row1 .hair {
    flex: 1;
}
.sec-credit_row2 {
    justify-content: space-between;
}
.sec-credit_row2 .make {
    margin-left: 26%;
}
.sec-credit_group {
    text-align: left;
}
.sec-credit_group .tit {
    font-size: clamp(12px, 1.6vw, 18px);
    margin-bottom: 1em;
}
.sec-credit_group .name {
    margin-bottom: .6em;
    font-size: clamp(15px, 2.2vw, 26px);
    letter-spacing: .05em;
}
.sec-credit_group .name.indent {
    padding-left: 1.6em;
}
.sec-credit_group .name a {
    color: var(--garden-text);
    display: inline-block;
    transition: .4s;
}
.sec-credit_group .name a:hover {
    opacity: .6;
}


/* ==================================================
   レスポンシブ
=================================================== */
@media screen and (max-width:768px){
    .collection section {
        margin-bottom: 5em;
    }
    .mainV_title_row1,
    .mainV_title_row2 {
        gap: 1.2em;
    }
    .sec-1_col {
        gap: 1.6em;
    }
    .sec-1_col-right {
        margin-top: 2em;
    }
    .sec-1_center {
        gap: 1.6em;
    }
    .sec-3_momoko {
        width: 70%;
    }
    .sec-3_bottom,
    .sec-4 {
        gap: 3%;
    }
    .sec-credit_row2 .make {
        margin-left: 15%;
    }
}

@media screen and (max-width:540px){
    .collection section {
        margin-bottom: 3.5em;
    }
    .mainV {
        padding-top: 2.5em;
    }
    .mainV_pic {
        margin-bottom: 2em;
    }
    .mainV_title_row1,
    .mainV_title_row2 {
        gap: .8em;
    }
    .sec-1_inner {
        gap: 6%;
    }
    .sec-1_col {
        width: 43%;
        gap: 1em;
    }
    .sec-1_col-right {
        margin-top: 1.2em;
    }
    .sec-1_center {
        gap: 1em;
    }
    .sec-2_sub,
    .sec-3_bottom {
        gap: 4%;
    }
    .sec-3_momoko {
        width: 100%;
    }
    .sec-credit_row {
        flex-direction: column;
    }
    .sec-credit_row1 {
        margin-bottom: 3em;
    }
    .sec-credit_year {
        width: 100%;
        margin-bottom: 1.4em;
    }
    .sec-credit_row2 .make {
        margin-left: 0;
        margin-bottom: 2.5em;
    }
    .sec-credit_group .name.indent {
      padding-left: 0;
  }
}