@charset "utf-8";
.__________________PC-ADD__________________{}

.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
._____TOPICS_____{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

._{}
/*#topics-pickup 共通*/
.TOPICS #topics-pickup-01,
.TOPICS #topics-pickup-02 {
 width: calc(100% - 40px);
 max-width: 1700px;
 min-width: 1200px;
 margin-left: auto;
 margin-right: auto;
 box-sizing: border-box;
/* ヘッダーの高さ分を指定 */
 scroll-margin-top: 160px; 
}

.TOPICS #topics-pickup-01 .inner,
.TOPICS #topics-pickup-02 .inner {
 width: 88.235%; /*1500px / 1700px*/
 max-width: 1500px;
 margin-left: auto;
 margin-right: auto;
}

.TOPICS #topics-pickup-01 img,
.TOPICS #topics-pickup-02 img {
 display: block;
 max-width: 100%;
 height: auto;
 margin-left: auto;
 margin-right: auto;
}

.TOPICS #topics-pickup-01 p,
.TOPICS #topics-pickup-02 p {
 margin-top: 0;
 margin-bottom: 0;
}

._{}
/*見出し*/
.TOPICS #topics-pickup-01 h3,
.TOPICS #topics-pickup-02 h3 {
 display: flex;
 align-items: center;
 margin-top: 0;
 margin-bottom: 0;
 padding-top: 0;
 padding-bottom: 0;
}

.TOPICS #topics-pickup-01 h3 span,
.TOPICS #topics-pickup-02 h3 span {
 display: block;
 position: static;
 margin-top: 0;
 margin-bottom: 0;
 padding-top: 0;
 padding-bottom: 0;
}

.TOPICS #topics-pickup-01 h3 span:nth-of-type(1),
.TOPICS #topics-pickup-02 h3 span:nth-of-type(1) {
 flex-shrink: 0;
 font-family: "Poppins", sans-serif;
 font-size: 110px;
 font-weight: 600;
 font-style: italic;
 line-height: 1;
 color: var(--color-or);
}

.TOPICS #topics-pickup-01 h3 span:nth-of-type(2) {
 margin-left: 35px;
 font-family: "Noto Sans JP", sans-serif;
 font-size: 42px;
 font-weight: 700;
 line-height: 48px;
}

.TOPICS #topics-pickup-02 h3 span:nth-of-type(2) {
 margin-left: 50px;
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 32px;
 font-weight: 500;
 line-height: 1.5;
}

._{}
/*#topics-pickup-01*/
.TOPICS #topics-pickup-01 {
 position: relative;
 margin-top: 100px;
 padding-top: 100px;
 padding-bottom: 45px;
 background: var(--color-gr-1);
}

/*上段：本文＋ハイロック*/
.TOPICS #topics-pickup-01 .intro-box {
 display: grid;
 grid-template-columns: 1fr 1fr;
 column-gap: 80px;
 align-items: start;
 margin-top: 85px;
}

.TOPICS #topics-pickup-01 .top-col .txt {
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 17px;
 line-height: 28px;
}

.TOPICS #topics-pickup-01 .top-col .txt + .txt {
 margin-top: 30px;
}

.TOPICS #topics-pickup-01 .btn {
 margin-top: 30px;
}

.TOPICS #topics-pickup-01 .btn a img{
 width: 140px;
 display: inline-block;
}


.TOPICS #topics-pickup-01 .btn a:hover {
 opacity: 0.7;
}

.TOPICS #topics-pickup-01 .bottom-col {
 padding-top: 30px;
 padding-right: 45px;
 padding-bottom: 60px;
 padding-left: 45px;
 background: #fff;
}

.TOPICS #topics-pickup-01 .bottom-col dl {
 margin-top: 0;
 margin-bottom: 0;
}

.TOPICS #topics-pickup-01 .bottom-col dt {
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 20px;
 font-weight: 500;
 line-height: 1.5;
}

.TOPICS #topics-pickup-01 .bottom-col dd {
 margin-top: 10px;
 margin-left: 0;
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 16px;
 line-height: 26px;
}

.TOPICS #topics-pickup-01 .bottom-col .item {
 margin-top: 50px;
}

/*製品名（共通）*/
.TOPICS #topics-pickup-01 .name {
 font-family: "Noto Sans JP", sans-serif;
 font-size: 19px;
 font-weight: 500;
 line-height: 1.5;
}

/*アパレル①～④：2列*/
.TOPICS #topics-pickup-01 .apparel {
 display: grid;
 grid-template-columns: 1fr 1fr;
 column-gap: 80px;
 row-gap: 55px;
 margin-top: 75px;
}

.TOPICS #topics-pickup-01 .apparel .box {
 display: grid;
 grid-template-columns: 1fr 1fr;
 column-gap: 20px;
 align-content: start;
}

.TOPICS #topics-pickup-01 .apparel .name {
 grid-column: 1 / -1;
 margin-bottom: 10px;
 padding-left: 40px;
}

/*価格表記（各製品の下）*/
.TOPICS #topics-pickup-01 .price {
 margin-top: 20px;
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 15px;
 line-height: 22px;
 text-align: center;
}

.TOPICS #topics-pickup-01 .apparel .price {
 grid-column: 1 / -1;
}

/*⑤キャップ：1列中央*/
.TOPICS #topics-pickup-01 .cap {
 position: relative;
 width: 47.333%; /*710px / 1500px*/
 margin-top: 140px;
 margin-left: auto;
 margin-right: auto;
}

.TOPICS #topics-pickup-01 .cap .name {
 position: absolute;
 top: 8.5%;
 left: 18%;
 z-index: 1;
}

/*1536以下*/
@media screen and (max-width: 1535px) {

.TOPICS #topics-pickup-01 .cap .name {
 left: 13%;
}
 
}


/*⑥～⑧：3列*/
.TOPICS #topics-pickup-01 .goods {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 column-gap: 78px;
 margin-top: 95px;
}

.TOPICS #topics-pickup-01 .goods .box {
 position: relative;
}

.TOPICS #topics-pickup-01 .goods .name {
 position: absolute;
 top: 15px;
 left: 15px;
 z-index: 1;
}

/*⑨・モデル・⑩：3列（左右に50pxずつはみ出す）*/
.TOPICS #topics-pickup-01 .special {
 display: grid;
 grid-template-columns: 480fr 560fr 480fr;
 column-gap: 40px;
 align-items: start;
 width: 106.667%; /*1600px / 1500px*/
 margin-top: 85px;
 margin-left: -3.333%;
}

.TOPICS #topics-pickup-01 .special .box {
 position: relative;
}

.TOPICS #topics-pickup-01 .special .box:nth-of-type(1),
.TOPICS #topics-pickup-01 .special .box:nth-of-type(3) {
 margin-top: 65px;
}

.TOPICS #topics-pickup-01 .special .name {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
}

.TOPICS #topics-pickup-01 .special .txt {
 width: fit-content;
 margin-top: 20px;
 margin-left: auto;
 margin-right: auto;
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 18px;
 line-height: 28px;
}

/*注記（グレーの箱の右下）*/
.TOPICS #topics-pickup-01 .annotation {
 position: absolute;
 right: 20px;
 bottom: 20px;
 font-family: "IBM Plex Sans JP", sans-serif;
 font-size: 14px;
 line-height: 1.5;
 text-align: right;
}

._{}
/*#topics-pickup-02*/
.TOPICS #topics-pickup-02 {
 margin-top: 60px;
 padding-top: 100px;
 padding-bottom: 110px;
 border: 1px solid #e4e4e4;
 background: #fff;
}

.TOPICS #topics-pickup-02 .item {
 margin-top: 40px;
 padding-top: 130px;
 padding-right: 20px;
 padding-bottom: 115px;
 padding-left: 20px;
 background: #cbf5ff;
}


._{}
/*#topics-list サブ見出し*/
.TOPICS #topics-list .sub-ttl {
 margin-top: 0;
 margin-bottom: 15px;
 font-family: "Noto Sans JP", sans-serif;
 font-size: 16px;
 font-weight: 600;
 line-height: 1.6;
 color: #333333;
}


.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}
._____CONCEPT_____{}
.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX{}

._{}
/*共通*/
.CONCEPT #concept img,
.CONCEPT #six-points img {
 display: block;
 width: 100%;
 height: auto;
}

._{}
/*#concept*/
.CONCEPT #concept {
 padding-top: 100px;
 padding-bottom: 100px;
}

/*メッセージが左・画像が右*/
.CONCEPT #concept .inner {
 display: flex;
 flex-direction: row-reverse;
 justify-content: space-between;
 width: calc(100% - 200px);
 max-width: 1600px;
 min-width: 1200px;
 margin-left: auto;
 margin-right: auto;
}

.CONCEPT #concept .top-col {
 width: 44.125%; /*706px / 1600px*/
}

.CONCEPT #concept .bottom-col {
 width: 45%; /*720px / 1600px*/
}

._{}
/*#six-points*/
.CONCEPT #six-points {
 padding-top: 120px;
 padding-bottom: 0;
 background: var(--color-or);
 scroll-margin-top: 100px; 
}

.CONCEPT #six-points .inner {
 width: calc(100% - 200px);
 max-width: 1720px;
 min-width: 1200px;
 margin-left: auto;
 margin-right: auto;
}

.CONCEPT #six-points .logo {
 width: 81.395%; /*1400px / 1720px*/
 margin-left: auto;
 margin-right: auto;
}

/*ヘッダー・項目・フッター*/
.CONCEPT #six-points .pc-show {
 display: grid;
 grid-template-columns: 1fr 1fr;
 column-gap: 3.488%; /*白枠どうしの間 60px / 1720px*/
 margin-top: 100px;
}

.CONCEPT #six-points .pc-show .header,
.CONCEPT #six-points .pc-show .footer {
 grid-column: 1 / -1;
}

/*項目：ラベルのはみ出し分（左右20px）だけ白枠の外に広げる*/
.CONCEPT #six-points .pc-show .item:nth-of-type(2),
.CONCEPT #six-points .pc-show .item:nth-of-type(3) {
 margin-top: 60px;
 margin-left: -2.41%; /*20px / 830px*/
 margin-right: -2.41%;
}

.CONCEPT #six-points .pc-show .footer {
 margin-top: -30px;
}

.CONCEPT #six-points .pc-show .footer img{
 width: 90%;
 display: block;
 margin-right: auto;
 margin-left: auto;
}