@charset "utf-8";

/*================================

intro

================================*/

.intro {
                display: flex;
                /*min-height: 700px;*/
                width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
                text-align: center;
                margin-top: 30px;
                }
@media (max-width: 1024px) {
.intro {
                height: calc(100svh + 10px);
                max-width: 700px;
                margin: auto;
                justify-content: flex-start;
                }
                }
@media (max-width: 768px) {
.intro {
                height: calc(100svh + 40px);
                max-width: 700px;
                margin: auto;
                }
                }

.intro ._inner{
                display: flex;
                height: auto;
                width: 100%;
	align-items: stretch;
	justify-content: center;
                flex-direction: row;
                text-align: center;
                }
@media (max-width: 1024px) {
.intro ._inner{
                flex-direction: column;
                }
                }

.intro ._inner .series{
                display: flex;
                width: 30%;
	align-items: center;
	justify-content: center;
                flex-direction: column;
                }
@media (max-width: 1024px) {
.intro ._inner .series{
                width: 100%;
                height: calc(((100svh - 90px) - 700px )/2);
                }
                }
@media (max-width: 768px) {
.intro ._inner .series{
                width: 100%;
                height: calc(((100svh - 60px) - 100svw )/2);
                }
                }

.intro ._inner .series h2 {
                font-size: 1.5em;
                line-height: 1em;
                letter-spacing: .05em;
                }

.intro ._inner .photo{
                display: flex;
                width: 40%;
	aspect-ratio: 1;
	align-items: center;
	justify-content: center;
                }
@media (max-width: 1024px) {
.intro ._inner .photo{
                width: 100%;
                }
                }

.intro ._inner .photo img{
                width: 100%;
                }
@media (max-width: 1024px) {
.intro ._inner .photo img{
                width: 90%;
                }
                }
@media (max-width: 768px) {
.intro ._inner .photo img{
                width: 100%;
                }
                }

.intro ._inner .name{
                display: flex;
                width: 30%;
	align-items: center;
	justify-content: center;
                flex-direction: column;
                }
@media (max-width: 1024px) {
.intro ._inner .name{
                width: 100%;
                height: calc(((100svh - 90px) - 700px )/2);
                }
                }
@media (max-width: 768px) {
.intro ._inner .name{
                width: 100%;
                height: calc(((100svh - 60px) - 100svw )/2);
                }
                }

.intro ._inner .name h3 {
                font-size: 1.2em;
                line-height: 1.5em;
                }

.intro ._inner .name p {
                margin-top: 10px;
                font-size: .9em;
                line-height: 1.5em;
                }

.intro .links{
                position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
                width: 40%;
                height: 100px;
                padding-top: 50px;
	}
@media (max-width: 1024px) {
.intro .links{
                width: 100%;
                padding: 0 15%;
                column-gap: 10%;
	}
                }

.intro .links a{
                position: relative;
                display: block;
                width: 35%;
                margin: auto;
	}
@media screen and (max-width: 1024px) {
.intro .links a{
                width: 100%;
	}
	}

.intro .links a p{
                text-align: center;
                padding: 1.3em 0;
	}

.intro .links a ._overlay{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-bottom: 1px solid #999;
	-webkit-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	}

.intro .links a:hover ._overlay{
                border-bottom: 1px solid #222;
	}

/*================================

detail

================================*/

.detail {
                width: 70%;
                min-width: 700px;
                max-width: 1300px;
                margin: auto;
                margin-top: 80px;
                margin-bottom: 100px;
                }
@media (max-width: 768px) {
.detail {
                width: 90%;
                min-width: 90%;
                max-width: 90%;
                margin: auto;
                margin-top: 40px;
                margin-bottom: 60px;
                }
                }


/*===============
specifications
===============*/

.detail .specifications {
                width: 100%;
                }

.detail .specifications h4{
                text-align: center;
                height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
                border-bottom: 1px solid #ccc;
                font-weight: 500;
                }

.detail .specifications .innerspec{
                width: 100%;
                padding: 40px 30px;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: nowrap;
                }
@media (max-width: 768px) {
.detail .specifications .innerspec{
                width: 100%;
                padding: 40px 0;
	display: block;
                }
                }

.detail .specifications .innerspec > div{
                width: 100%;
                }

.detail .specifications .innerspec > div:last-child{
                }
@media (max-width: 768px) {
.detail .specifications .innerspec > div:last-child{
                margin-top: 20px;
                }
                }

.detail .specifications .innerspec > div h5{
                font-size: 1em;
                margin-bottom: 1.5em;
                }

.detail .specifications .innerspec > div:last-child h5{
                /*line-height: 1.8em;*/
                }

.detail .specifications .innerspec > div p{
                font-size: 1em;
                line-height: 1.8em;
                }

.detail .specifications .innerspec > div:last-child p{
                line-height: 1.8em;
                }

.detail .specifications .innerspec > div:last-child p span{
                font-size: .8em;
                }

.detail .specifications .innerspec > div a{
                font-size: 1em;
                line-height: 20px;
                height: 20px;
	background-position: left center;
	background-repeat: no-repeat;
	background-image: url(../images/svglink.svg);
	background-size: 10px;
                padding-left: 12px;
                border-bottom: 1px solid #999;
                }

.detail .specifications .innerspec > div a:hover{
                border-bottom: 1px solid #222;
                }

.detail .specifications .innerspec > div img{
                display:block;
                width: 85%;
                opacity: .75;
                }
.detail .specifications .innerspec > div img.w95{
                width: 95%;
                }
.detail .specifications .innerspec > div img.w75{
                width: 75%;
                }
.detail .specifications .innerspec > div img.w65{
                width: 65%;
                }
.detail .specifications .innerspec > div img.w55{
                width: 55%;
                }
.detail .specifications .innerspec > div img.w45{
                width: 45%;
                }
.detail .specifications .innerspec > div img.w35{
                width: 35%;
                }
@media (max-width: 768px) {
.detail .specifications .innerspec > div img{
                width: 100%;
                margin: auto;
                }
.detail .specifications .innerspec > div img.w75{
                width: 85%;
                }
.detail .specifications .innerspec > div img.w65{
                width: 75%;
                }
.detail .specifications .innerspec > div img.w55{
                width: 65%;
                }
.detail .specifications .innerspec > div img.w45{
                width: 65%;
                }
.detail .specifications .innerspec > div img.w35{
                width: 55%;
                }
                }

.detail .specifications .innerspec > div img{
                }

.detail .specifications .inner{
                width: 100%;
                padding: 40px 30px;
                }
@media (max-width: 768px) {
.detail .specifications .inner{
                width: 100%;
                padding: 40px 5%;
                }
                }

.detail .specifications .inner h5{
                font-size: 1em;
                }

.detail .specifications .inner p{
                margin-top: 30px;
                font-size: 1em;
                line-height: 1.8em;
                }


/*===============
color
===============*/


.detail .color {
                width: 100%;
                margin-top: 20px;
                }
@media (max-width: 768px) {
.detail .color {
                margin-top: 0;
                }
                }

.detail .color h4{
                text-align: center;
                height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
                border-bottom: 1px solid #ccc;
                font-weight: 500;
                }

.inner{
                width: 100%;
                padding: 0 0;
                }

.inner h5{
                font-size: 1em;
                }

.inner p{
                margin-top: 30px;
                font-size: 1em;
                line-height: 1.6em;
                }

.inner .accordion  {
                margin-inline: 0;
                border-bottom:1px solid #ccc;
                }

.inner .accordion:last-child  {
                border-bottom:none;
                }

.inner .accordion .accordion_title {
                position: relative;
                border: none;
                display: block;
                list-style: none;
                width: 100%;
                cursor: pointer;
                height: 80px;
                font-size: 1em;
                line-height: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
                }

.inner .accordion .accordion_title:hover {
                background-color:#f3f3f3;
                }
@media (max-width: 768px) {
.inner .accordion .accordion_title:hover {
                background-color:#fff;
                }
                }

.inner .accordion[open] .accordion_title:hover {
                background-color:#fff;
                }

.inner .accordion summary.accordion_title::-webkit-details-marker {
                display:none;
                }

.inner .accordion .accordion_title:after {
                content: "┼";
                position: absolute;
                top: calc(50% - 0.5em);
                right: 20px;
                line-height: 1;
                padding: 0;
                pointer-events: none;
                }

.inner .accordion::details-content {
                opacity: 0;
                block-size: 0;
                transition: .3s;
                transition-property: display, opacity, block-size, padding;
                transition-behavior: allow-discrete;
                line-height: 1.6em;
                }

.inner .accordion .accordion_content {
                padding: 0 2em 0 3em;
                }

.inner .accordion .accordion_content > *:first-of-type {
                margin-top: 0;
                }

.inner .accordion .accordion_content > *:last-of-type {
                margin-bottom: 0;
                }

.inner .accordion[open]::details-content {
                opacity: 1;
                block-size: auto;
                block-size: calc-size(auto, size);
                }

.inner .accordion[open] .accordion_content {
                padding: 10px 30px 40px;
                }
@media (max-width: 768px) {
.inner .accordion[open] .accordion_content {
                padding: 0 0 40px;
                }
                }

.inner .accordion[open] .accordion_title:after {
                content: "―";
                }

.inner .accordion[open] .accordion_content p.type{
                font-size: 1em;
                line-height: 1.5em;
                padding-bottom: 20px;
                }

.inner .accordion[open] .accordion_content p.type.second{
                margin-top: 30px;
                }

.inner .accordion[open] .accordion_content .list{
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	column-gap: 20px;
	row-gap: 10px;
                }
@media (max-width: 768px) {
.inner .accordion[open] .accordion_content .list{
	column-gap: 10px;
	row-gap: 10px;
                }
                }

.inner .accordion[open] .accordion_content .list div{
                width: calc((100% - 100px)/6);
                height: auto;
                }
@media (max-width: 768px) {
.inner .accordion[open] .accordion_content .list div{
                width: calc((100% - 20px)/3);
                height: auto;
                }
                }

.inner .accordion[open] .accordion_content .list div img{
                display: block;
                width: 100%;
                border: 1px solid #dedede;
                }

.inner .accordion[open] .accordion_content .list div > p{
                margin-top: 5px;
                font-size: .85em;
                line-height: 1.5em;
                }

.option .inner .accordion[open] .accordion_content .list div > p{
                font-size: .8em;
                }

.inner .accordion[open] .accordion_content .list div > p span{
                font-size: .85em;
                }


.inner .accordion[open] .accordion_content .noimagelist{
                width: 100%;
                margin-top: 30px;
                }

.inner .accordion[open] .accordion_content .noimagelist p{
                font-size: .85em;
                line-height: 1.6em;
                }


.inner .accordion[open]::selection {
	background: #fff;
	color: #222;
	}
.inner .accordion[open]::-moz-selection {
	background: #fff;
	color: #222;
	}

.inner .accordion[open] .accordion_content .special{
                border: 1px solid #ccc;
                padding: 30px;
                margin-top: 30px;
                }
@media (max-width: 768px) {
.inner .accordion[open] .accordion_content .special{
                padding: 20px;
                margin-top: 20px;
                }
                }

.inner .accordion[open] .accordion_content .special .order{
                margin: 0;
                padding-bottom: 10px;
                line-height: 1em;
                }

.inner .accordion[open] .accordion_content .special .ordername{
                margin-top: 20px;
                font-size: .9em;
                line-height: 1em;
                }

.inner .accordion[open] .accordion_content .special .list{
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	column-gap: 20px;
	row-gap: 10px;
                margin-top: 20px;
                }
@media (max-width: 768px) {
.inner .accordion[open] .accordion_content .special .list{
	column-gap: 10px;
	row-gap: 10px;
                }
                }

.inner .accordion[open] .accordion_content .special .list div{
                width: calc((100% - 200px)/11);
                height: auto;
                }
@media (max-width: 768px) {
.inner .accordion[open] .accordion_content .special .list div{
                width: calc((100% - 30px)/4);
                height: auto;
                }
                }




/*===============
option
===============*/

.detail .option {
                width: 100%;
                margin-top: 30px;
                }
@media (max-width: 768px) {
.detail .option {
                width: 100%;
                margin-top: 10px;
                }
                }

.detail .option h4{
                text-align: center;
                height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
                border-bottom: 1px solid #ccc;
                font-weight: 500;
                }

.detail .option p.type{
                padding: 0 30px;
                font-size: 1em;
                line-height: 1.5em;
                }


/*================================

lineup

================================*/

.lineup {
                width: 100%;
                margin: auto;
                padding: 100px 0 100px;
                border-top: 1px solid #ccc;
                }
@media (max-width: 768px) {
.lineup {
                padding: 60px 0 0;
                }
                }

.lineup h4{
                font-size: 1.3em;
                line-height: 1em;
                text-align: center;
                }

.lineup div.list{
                width: 75%;
                margin: auto;
                margin-top: 100px;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	column-gap: 7%;
	row-gap: 40px;
	flex-wrap: wrap;
                }
@media (max-width: 768px) {
.lineup div.list{
                width: 90%;
                margin-top: 60px;
                margin-bottom: 60px;
	column-gap: 5%;
	row-gap: 40px;
                }
                }

.lineup div.list div{
                width: calc(86% / 3);
                }
@media (max-width: 768px) {
.lineup div.list div{
                width: calc(95% / 2);
                }
                }

.lineup div.list div a{
                width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-direction: column;
                }

.lineup div.list div a div:first-child{
                width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
                overflow: hidden;
	aspect-ratio: 1;
                }

.lineup div.list div a div:first-child img{
                width: 100%;
	-webkit-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
                }

.lineup div.list div a:hover div:first-child img{
                width: 106%;
                }

.lineup div.list div a div:last-child{
                width: 100%;
                margin-top:20px;
                }
@media (max-width: 768px) {
.lineup div.list div a div:last-child{
                margin-top: 10px;
                }
                }

.lineup div.list div a div:last-child p{
                font-size: .8em;
                line-height: 1.5em;
                text-align: left;
                }

.lineup div.list div a div:last-child p:last-child{
                margin-top:10px;
                }
@media (max-width: 768px) {
.lineup div.list div a div:last-child p:last-child{
                margin-top: 5px;
                }
                }




/* Lenis の推奨セット */
html.lenis, html.lenis body { height: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden !important; }

/* これがあると高さが縮む原因になります。あれば外す */
html, body { height: auto !important; /* 100% は NG */ }
/* body/html に overflow: hidden を常時指定していると NG */