@charset "UTF-8";
/** grid css */
/** version 20.12.23 */

.g-row { display: grid; display: -ms-grid; }

/* スマホ */
@media screen and (max-width: 449px) {
  .g-row.sp-flex { display: flex; flex-wrap: wrap; }
  .g-row.sp-flex [class*="clm"] { width: 100%; }
}

.g-row.sep2 { grid-template-areas: 'clm1 clm2'; }
.g-row.sep2.rat11 { grid-template-columns: 1fr 1fr; }
.g-row.sep2.rat21 { grid-template-columns: 2fr 1fr; }
.g-row.sep2.rat12 { grid-template-columns: 1fr 2fr; }
.g-row.sep2.rat31 { grid-template-columns: 3fr 1fr; }
.g-row.sep2.rat13 { grid-template-columns: 1fr 3fr; }
.g-row.sep2.rat41 { grid-template-columns: 4fr 1fr; }
.g-row.sep2.rat14 { grid-template-columns: 1fr 4fr; }
.g-row.sep2.rat23 { grid-template-columns: 2fr 3fr; }
.g-row.sep2.rat32 { grid-template-columns: 3fr 2fr; }
.g-row.sep2.rat43 { grid-template-columns: 4fr 3fr; }

.g-row.sep3 { grid-template-areas: 'clm1 clm2 clm3'; }
.g-row.sep3.rat111 { grid-template-columns: 1fr 1fr 1fr; }
.g-row.sep3.rat211 { grid-template-columns: 2fr 1fr 1fr; }
.g-row.sep3.rat121 { grid-template-columns: 1fr 2fr 1fr; }
.g-row.sep3.rat112 { grid-template-columns: 1fr 1fr 2fr; }
.g-row.sep3.rat311 { grid-template-columns: 3fr 1fr 1fr; }
.g-row.sep3.rat131 { grid-template-columns: 1fr 3fr 1fr; }
.g-row.sep3.rat113 { grid-template-columns: 1fr 1fr 3fr; }
.g-row.sep3.rat122 { grid-template-columns: 1fr 2fr 2fr; }
.g-row.sep3.rat212 { grid-template-columns: 2fr 1fr 2fr; }
.g-row.sep3.rat221 { grid-template-columns: 2fr 2fr 1fr; }
.g-row.sep3.rat123 { grid-template-columns: 1fr 2fr 3fr; }
.g-row.sep3.rat132 { grid-template-columns: 1fr 3fr 2fr; }
.g-row.sep3.rat213 { grid-template-columns: 2fr 1fr 3fr; }
.g-row.sep3.rat231 { grid-template-columns: 2fr 3fr 1fr; }
.g-row.sep3.rat312 { grid-template-columns: 3fr 1fr 2fr; }
.g-row.sep3.rat321 { grid-template-columns: 3fr 2fr 1fr; }

.g-row.sep4 { grid-template-areas: 'clm1 clm2 clm3 clm4'; }
.g-row.sep4.rat1111 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.g-row.sep5 { grid-template-areas: 'clm1 clm2 clm3 clm4 clm5'; }
.g-row.sep5.rat11111 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.g-row.sep6 { grid-template-areas: 'clm1 clm2 clm3 clm4 clm5 clm6'; }
.g-row.sep6.rat111111 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

.g-row.sep7 { grid-template-areas: 'clm1 clm2 clm3 clm4 clm5 clm6 clm7'; }
.g-row.sep7.rat1111111 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

.g-row.sep8 { grid-template-areas: 'clm1 clm2 clm3 clm4 clm5 clm6 clm7 clm8'; }
.g-row.sep8.rat11111111 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

.g-row .clm1 { grid-area: clm1; }
.g-row .clm2 { grid-area: clm2; }
.g-row .clm3 { grid-area: clm3; }
.g-row .clm4 { grid-area: clm4; }
.g-row .clm5 { grid-area: clm5; }
.g-row .clm6 { grid-area: clm6; }
.g-row .clm7 { grid-area: clm7; }
.g-row .clm8 { grid-area: clm8; }



/* 画面左右分割 */
.twoway-content { display: grid; display: -ms-grid; }
:root {
 --tp1-sub: 350px; --tp1-main: 840px; --tp1-left: 20px;
}

.twoway-content.main-right { grid-template-areas: 'sub main'; grid-template-columns: var(--tp1-sub) var(--tp1-main); }
.twoway-content .main, .twoway-content .sub { padding: 0 10px; }

/* 拡張表示アイコン */
.expand-icon { display: none; opacity: 0.8; margin: 5px; cursor: default; }
.expand-icon:before  { content: '\f424'; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.expand-icon:hover { margin: 0; }

@media screen and (max-width: 1200px) {
     .twoway-content.main-right { grid-template-columns: 0 var(--tp1-main);  }
     .twoway-content.main-right {  padding-left: calc(100vw - var(--tp1-main) - 10px); }
     .twoway-content .sub .sub-content { display: none; }
     .twoway-content .sub .expand-icon { display: block; position: absolute; }
     .twoway-content.main-right .sub .expand-icon {  left: var(--tp1-left); }
}

.twoway-content .sub .sub-content { padding: 5px; border-radius: 8px; border: 1px solid #ccc; background-color: #fff; }
.twoway-content .sub .sub-content.front-view { display: block; position: absolute; left: var(--tp1-left); opacity: 0.8; z-index: 1; }