@charset "utf-8";

header .content #linkBox ul li:nth-of-type(2) a {color: #c3ba7f;}
footer .col2 .link .link1 li:nth-of-type(2) a {color: #c3ba7f;}

.boxTop {margin-bottom: 60px;}
.boxTop .boxTopTxt {text-align: center; margin: 0 0 60px; letter-spacing: 0.1em; line-height: 2;}
.boxTop .boxTopList li {width: 32%; text-align: center; border-radius: 20px; background: #f6f5ef; padding: 15px; font-weight: bold; align-items: center; justify-content: space-around; letter-spacing: 0.05em; line-height: 1.7;}
.boxTop .boxTopList li .red {color: #ab3434;}
.boxTop .boxTopList li .fs28 {font-size: 2.8rem;}
.boxTop .boxTopList li .fs20 {font-size: 2rem;}
.boxTop .boxTopList li .colorPicking {margin: 10px 0 0; justify-content: center; align-items: center;}
.boxTop .boxTopList li .colorPicking figure {margin-right: 10px;}
.boxTop .boxTopList li .colorPicking p {color: #af62a4; font-size: 1.2rem;}
.boxTop .boxTopList li .cap {font-size: 1.2rem; margin: 20px 0 0;}
.boxTop .boxTopList li .cap a {text-decoration: underline; text-underline-offset: 4px;}

.box {margin-bottom: 100px;}
.box .row1 {/*align-items: center;*/ margin-bottom: 60px;}
.box .row1 .col1 {width: 50%;}
.box .row1 .col2 {width: 47%; text-align: left; padding: 0 20px;}
.box .row1 .col2 .tit {color: #c3ba7f; margin-bottom: 40px; position: relative; letter-spacing: 0.1em;text-align: center;}
.box .row1 .col2 .tit::after {content: ''; width: 80px; height: 1px; background: #000; position: absolute; left: 0; right: 0; bottom: -20px; margin: 0 auto;}
.box .row1 .col2 .tit .en {font-family: 'IBM Plex Sans', sans-serif; margin-bottom: 20px;}
.box .row1 .col2 .tit .en span {display: block; line-height: 1;}
.box .row1 .col2 .tit .en span:nth-of-type(1) {margin-bottom: 10px;}
.box .row1 .col2 .tit .en span:nth-of-type(2) {font-size: 5rem;}
.box .row1 .col2 .tit .jp {font-size: 1.4rem; color: #000;}
.box .row1 .col2 > p {line-height: 2.2;}
.box .row2 ul {justify-content: flex-start;}
.box .row2 ul li {width: 18.09%; margin: 0 2.38% 2.38% 0;}
.box .row2 ul li:nth-of-type(5n) {margin-right: 0;}
.box .row2 ul li a figure {margin-bottom: 10px;}
.box .row2 ul li a p {display: inline-block; font-size: 2rem; font-weight: bold; position: relative; letter-spacing: 0.1em; font-family: 'IBM Plex Sans', sans-serif; padding-right: 25px;}
.box .row2 ul li a p::after {content: ''; width: 20px; height: 20px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-top: 2px; right: 0; background: url(../images/common/ic_arr_round.png) no-repeat; background-size: 100% 100%; transition: 0.2s ease-in-out;}
.box .row2 ul li a:hover {opacity: 0.6;}
.box .row2 ul li a:hover p::after {right: -5px;}

.box:nth-of-type(2n) .row1 .col1 {order: 2;}
.box:nth-of-type(2n) .row1 .col2 {order: 1;}
.box:last-of-type {margin-bottom: 0;}

.boxBtn {max-width: 480px; width: 100%; margin: 0 auto;}
.boxBtn a{border: 1px solid #000; font-weight: bold; width: 100%; border-radius: 80px; text-align: center; line-height: 1.4;
transition: all 0.2s ease-in-out; font-size: 16px; height: 80px; display: flex; flex-wrap: wrap;justify-content: center;align-items: center; text-align: center; align-content: center; margin-top: 15px;}

.boxBtn a span {display: block; font-size: 13px; font-weight: normal;}
.boxBtn a.btn-white{background: #fff url("../images/common/ic_arr.png") no-repeat center right 25px;}
.boxBtn a.btn-black{background: #000 url("../images/common/ic_arr_white.png") no-repeat center right 25px; color: #fff;}
.boxBtn a:hover{background: #c3ba7f url("../images/common/ic_arr_white.png") no-repeat center right 25px !important; color: #fff; border: 1px solid #c3ba7f;}

@media (max-width: 1199px){
	.box .row1 .col2 .tit .en span:nth-of-type(2) {font-size: 4rem;}
	.box .row2 ul li a p {font-size: 1.6rem;}
}
@media (max-width: 810px) {
	.box .row1 .col2 > p br {display: none;}
}
@media (max-width: 767px) {
	.titH3 {text-align: left;}

	.box .row1 .col1 {width: 100%; text-align: center; margin-bottom: 40px; order: 1 !important;}
	.box .row1 .col2 {width: 100%; order: 2 !important; padding: 0;}
	.box .row1 .col2 > p {text-align: left;}
	.box .row2 ul li {width: 48%; margin: 0 4% 4% 0;}
	.box .row2 ul li img {width: 100%;}
	.box .row2 ul li:nth-of-type(5n) {margin-right: 4%}
	.box .row2 ul li:nth-of-type(2n) {margin-right: 0;}
	.box .row2 ul li a p {font-size: 4vw;}
    .box .row2 ul li a p::after{margin-top: 1px;}
    .boxBtn a,.boxBtn a:hover{background-position: center right 12px !important;}

	.boxTop .boxTopTxt {text-align: left; margin-bottom: 40px;}
    .boxTop .boxTopList li {width: 100%; margin-bottom: 20px;}
    .boxTop .boxTopList li:last-of-type {margin-bottom: 0;}
    .boxTop .boxTopList li p {font-size: 1.4rem;}
    .boxTop .boxTopList li .fs28 {font-size: 2rem;}
    .boxTop .boxTopList li .fs20 {font-size: 1.8rem;}
    .boxTop .boxTopList li .cap {font-size: 1.1rem;}
}

