@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------
simulator
----------------------------------------------------------------
*/

#simulator {
padding: 8% 0 0;
}
#simulator .slider-wrap.nigiyakashi{
margin-bottom: 12%;
}
#simulator .slider-wrap.nigiyakashi .slick-slide{
margin:0 2px;
}

#simulator .line.left,
#simulator .line.right{
width: 160px;
}

#simulator .title-text{
font-family: "jost", "sans-serif";
font-size: 1.4rem;
font-weight: 500;
}

#simulator .fukidashi{
padding-top: 4%;
}

#simulator .fukidashi p{
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 1rem;
line-height: 1.2;
}

#simulator .fukidashi + p.copy{
padding: 5% 8%;
font-size: 13px;
line-height: 1.6;
text-align: justify;
}

#simulator .options {
padding: 8%;
}

#simulator .group {
margin-bottom: 8%;
scroll-margin-top: calc(var(--pdf-area-height, 0px) + 16px);
}
#simulator .group {
  padding-bottom: env(safe-area-inset-bottom);
}
.group h3 {
  scroll-margin-top: calc(var(--pdf-area-height, 0px) + 16px);
}

#simulator .group h3 {
font-size: 1rem;
padding-bottom: 2%;
border-bottom: 1px solid #ccc;
font-weight: 400;
}

#simulator .group h3 strong{
display: inline-block;
font-family: "jost", sans-serif;
letter-spacing: 2px;
font-weight: 400;
padding-right: 1rem;
}

#simulator .group p{
font-size: 10px;
margin-top: 3%;
text-align: center;
}

#simulator .group p.notes{
text-align: left;
}


#simulator .group ul{
display: flex;
gap:2%;
width: 100%;
margin-top: 3%;
}
#simulator .group:nth-child(2) ul{
margin-top: 1%;
}
#simulator .group:nth-child(3) ul{
flex-wrap: wrap;
justify-content: center;
row-gap:2%;
column-gap: 2%;
}

#simulator .group:nth-child(1) li{
width: calc((100% - 6%)/4);
}
#simulator .group:nth-child(2) li,
#simulator .group:nth-child(4) li{
width: calc((100% - 8%)/5);
}
#simulator .group:nth-child(3) li{
width: calc((100% - 6%)/4);
  display: flex;
  flex-direction: column;
}

#simulator .group button {
  margin-bottom: 5%;
  padding: 3%;
  cursor: pointer;
  border: 1px solid #ccc;
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #000;
}
#simulator .group:nth-child(3) button{
margin-top: 0;
}

#simulator .group:nth-child(2) button,
#simulator .group:nth-child(4) button{
padding: 8% 8% 3%;
}
#simulator .group:nth-child(2) img,
#simulator .group:nth-child(3) img,
#simulator .group:nth-child(4) img{
display: block;
margin-bottom: 5%;
}
#simulator .group:nth-child(3) li:nth-child(2) img,
#simulator .group:nth-child(3) li:nth-child(3) img,
#simulator .group:nth-child(3) li:nth-child(4) img,
#simulator .group:nth-child(3) li:nth-child(5) img,
#simulator .group:nth-child(3) li:nth-child(6) img{
margin: 10px 0;
}

#simulator .group span{
text-align: center;
font-size: 60%;
line-height: 1.2;
margin: auto 0;
display: block;
}

#simulator .group:nth-child(3) span{
padding-bottom: 1%;
}
#simulator .group:nth-child(4) .cp-bk{
background-color: #000;
display: block;
width: 100%;
aspect-ratio: 1 / .6666;
margin-bottom: 5%;
}

#simulator .group button.active {
  border-color: #e7e0c8;
  background: #e7e0c8;
}

#simulator .group button.disabled {
  opacity: 0.3;
  pointer-events: none;
}

#simulator + .link-wrap a:last-child{
padding: 5% 0;
}

#pdfArea {
position: fixed;
display: flex;
bottom: 0;
left: 0;
background-color:#eee;
z-index: 10;
width: 100%;
height: auto;
align-items: center;
}
#pdfArea .preview{
width: 50%;
background-color: #fff;
aspect-ratio: 1 / 1;
padding: 3%;
}
#pdfArea .preview img{
width: 100%;
display: none;
}
#pdfFooter{
display: none;
}
#selectionSummary{
width: 44%;
padding:  3%;
height: 100%;

}
.summary ul {
padding: 0;
}

.summary li {
  display: grid;
  grid-template-columns: 70px 1fr;
  padding-bottom: 5%;
  margin-bottom: 5%;
  font-size: 50%;
  line-height: 1.2;
  border-bottom: 1px solid #ccc;
}

.summary .label {
color: #666;
}
.summary .value {
}
#pdfBtn,
#resetBtn{
position: relative;
margin-top: 5%;
padding: 3% 5%;
font-size: 65%;
font-family: "Zen Kaku Gothic New", sans-serif;
width: 100%;
text-align: center;
border: #000 1px solid;
color: #000;
border-radius: 50vh;
}
#pdfBtn img,
#resetBtn img{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 5%;
line-height: 1;
height: 20px;
width: auto;
display: block;
vertical-align: middle;
box-sizing: border-box;
}

.options-wrap .link-wrap a{
padding: 5% 0;
}

@media only print {
#pdfArea {
  width: 760px;          /* ← 重要：A4に収まる幅 */
  padding: 40px;         /* ← これが“紙の余白” */
  background: #ffffff;
  box-sizing: border-box;
}
#pdfBtn{
display: none!important;
}
#pdfFooter {
  margin-top: 24px;
  text-align: right;
}

#willticQR {
  width: 80px;
  height: auto;
}

#pdfFooter p {
  font-size: 11px;
  margin-top: 4px;
}
}

/* PDF生成中だけ適用 */
.pdf-mode #pdfBtn,
.pdf-mode #resetBtn {
  display: none !important;
}

/* 影・角丸を消したい場合 */
.pdf-mode .preview {
  box-shadow: none;
  border-radius: 0;
}

/* PDF用余白調整（必要なら） */
.pdf-mode #pdfArea {
  padding: 0;
}

@media (orientation: landscape),(min-width:768px){
  /* 横長の時のみ適用したいスタイル */
#pdfArea {
display: flex;
flex-flow: column;
bottom: auto;
top:0;
left: auto;
right: 0;
width: 40%;
height: 100vh;
align-items: center;
justify-content: center;
}
#pdfArea .preview {
width: 94%;
height: 50%;
}
#selectionSummary {
width: 50%;
height: auto;
margin:  20px auto;
overflow-y: scroll;
}

.options-wrap{
width: 60%;
margin-right: 40%;
}
footer{
height: auto;
}
body::after {
height: auto;
}
#simulator .line.left, #simulator .line.right {
    width: 50vw;
}
#simulator .fukidashi {
padding-top: 0;
max-width: 640px;
}
#simulator .fukidashi + p.copy {
padding:20px 40px;
max-width: 480px;
margin: 0 auto;
}
#simulator .options {
padding:20px 40px;
max-width: 480px;
margin: 0 auto;
}
.link-wrap a{
padding: 20px 0;
}
.link-wrap a:nth-child(1) {
padding: 20px 0;
margin-bottom: 20px;
}
.link-wrap {
padding-bottom: 60px;
}
#simulator .group p.notes {
    text-align: center;
}
.options-wrap .link-wrap a{
padding: 20px 0;
}
}

@media (orientation: landscape){
#pdfArea .preview img{
height: 100%;
width: auto;
margin: 0 auto;
}
#selectionSummary {
width: calc(100% - 40px);
height: calc(100% - 40px);
margin:  20px auto;
}
.kahen{
width: 100%;
display: flex;
gap:2%;
}
.kahen button{
width: 49%;
}
}