/* for masony item, muuny item */
.brick { display: block; position: absolute; }

.top_down p,
.right_left p {
  color: #fff;
}

.right_left {
  background: linear-gradient(90deg, #00b7ee 50%, #ffffff 50%);
}

.right_left p {
  background: linear-gradient(-90deg, #00b7ee 50%, #ffffff 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  white-space: nowrap;
}

.top_down {
  background: linear-gradient(#f39700 50%, #ffffff 50%);
}

.top_down p {
  position: relative;
  display: inline-block;
  background: linear-gradient(#ffffff 50%, #f39700 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}


/* 比率固定ボックス */
[class*=" ar-"],[class^=ar-] {
  display:block;
  width: 100%;
  position: relative;
  overflow:hidden;
}
.ar-a4 { padding-top: 141.4%; }
.ar-a4h { padding-top: 70.72%; }
.ar-32 { padding-top: 66%; }
.ar-23 { padding-top: 150%; }
.ar-43 { padding-top: 75%; }
.ar-34 { padding-top: 133.33%; }
.ar-169 { padding-top: calc(9/16*100%); }
.ar-1610 { padding-top: calc(10/16*100%); }
.ar-219 { padding-top: 42.86%; }
.ar-289 { padding-top: 32.14%; }
.ar-329 { padding-top: 28.125%; }
.ar-916 { padding-top: calc(16/9*100%); }
.ar-21 { padding-top: 50%; }
.ar-12 { padding-top: 200%; }
.ar-11, .ar-11vs { padding-top: 100%; }
.ar-gold { padding-top: 61.8%; }
.ar-golds { padding-top: 161.8%; }
.ar-yamato { padding-top: 70.71%; }
.ar-yamatos { padding-top: 141.42%; }
.ar-11vs {overflow: visible!important;}
.ar-50v { padding-top: 50vh; }
.ar-40v { padding-top: 40vh; }
.ar-40v { padding-top: 30vh; }


/*  ざっくりしたメディアクエリ */
@media screen and (orientation: landscape) and (min-width: 981px) {
  .ar-a4-pc { padding-top: 141.4%!important; }
  .ar-a4h-pc { padding-top: 70.72%!important; }
  .ar-32-pc { padding-top: 66%!important; }
  .ar-23-pc { padding-top: 150%!important; }
  .ar-43-pc { padding-top: 75%!important; }
  .ar-34-pc { padding-top: 133.33%!important; }
  .ar-169-pc { padding-top: 56.25%!important; }
  .ar-219-pc { padding-top: 42.86%!important; }
  .ar-289-pc { padding-top: 32.14%!important; }
  .ar-329-pc { padding-top: 28.125%!important; }
  .ar-916-pc { padding-top: 177.78%!important; }
  .ar-21-pc { padding-top: 50%!important; }
  .ar-12-pc { padding-top: 200%!important; }
  .ar-11-pc { padding-top: 100%!important; }
  .ar-gol-pcd { padding-top: 61.8%!important; }
  .ar-golds-pc { padding-top: 161.8%!important; }
  .ar-yamato-pc { padding-top: 70.71%!important; }
  .ar-yamatos-pc { padding-top: 141.42%!important; }
  .ar-30v, .ar-40v, .ar-50v { padding-top: 100vh; }
}

.arbox {
 display:flex;
 position: absolute;
 width:100%; height:100%;
 top:0;bottom:0;left:0;right:0;
}

.cr.ar-11, .cr.arbox { border-radius: 50%;}

.arTitle, .arTitle-m, .arTitle-b {position: absolute; width:100%; padding: 1rem 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arTitle {top:0;left:0;right:0;}
.arTitle-m {top:50%; left:0;right:0; transform: translateY(-50%); -webkit- transform: translateY(-50%); }
.arTitle-b {bottom:0;left:0;right:0;}


.arbox > iframe { width: 100%!important; height: 100%!important; }

.textbox { position: relative; margin-top: 1rem; }

/* placeholder --  */
.box-body:empty:before{
  content: attr(placeholder);
  color: #000;
  pointer-events: none;
  display: block; /* For Firefox */
}

.box-title { display: none;}

/* design border */
.pre-box .box-title,
.on-b-box .box-title,
.top-b-box .box-title,
.in-b-box .box-title {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  padding: 3px 9px;
  line-height: 1;
  height: 1.6rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

@media (min-width: 960px) {
  .box-title { font-size: 19px;}
}

.pre-box { position: relative; margin: 2em 0; }
.on-b-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border-radius: 8px;
}

.on-b-box .box-title {
    top: -13px;
    left: 10px;
    padding: 0 9px;
}
.top-b-box {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
}
.top-b-box .box-title {
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    border-radius: 5px 5px 0 0;
}
.in-b-box {
    position: relative;
    margin: 1em 0;
    padding: 25px 10px 7px;
}
.in-b-box .box-title {
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
}
.over-b-box { position: relative;  padding: 0.5em 1.5em; margin: 2em 0; }
.over-b-box:before, .over-b-box:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
}
.over-b-box:before {left: 10px;}
.over-b-box:after {right: 10px;}

.brackets-box {
    position: relative;
    padding:0.25em 1em;
    margin: 2em 0;
}
.brackets-box:before,.brackets-box:after{
    content:'';
    width: 20px; height: 30px;
    position: absolute;
    display: inline-block;
}
.brackets-box:before { top:0; left: 0; }
.brackets-box:after { bottom:0; right: 0; }

/* ドロップキャップ */
.dropCap > p:first-child:first-letter,
.dropCap:first-letter {
	font-size:2.5em;
	line-height: 60%;
	float: left;
	margin: 0 0.125em;
	padding: 0.25em 0;
}

/* ノートデザイン */
.note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ  */
  background-size: 100% 2.5em; /* 行の高さ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
/* ノートデザイン点線 */
.dashed-note {
  background-color: #fff; /* 背景色 */
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
                    linear-gradient(180deg, #ccc 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

/* box color */
/* color blk-b {#000000} */
.blk-b .on-b-box, .on-b-box { border: solid 3px #000000; }
.blk-b .on-b-box .box-title, .on-b-box .box-title { background-color: #ffffff; color: #000000; }
.blk-b .top-b-box, .top-b-box { border: solid 3px #000000; }
.blk-b .top-b-box .box-title,.top-b-box .box-title { background: #000000; color: #ffffff; }
.blk-b .in-b-box, .in-b-box { border: solid 2px #000000; }
.blk-b .in-b-box .box-title, .in-b-box .box-title { background: #000000; color: #ffffff; }
.blk-b .over-b-box, .over-b-box { border-top: solid 2px #000000; border-bottom: solid 2px #000000; }
.blk-b .over-b-box:before, .blk-b .over-b-box:after,
.over-b-box:before, .over-b-box:after { background-color: #000000; }
.blk-b .brackets-box:before,.brackets-box:before { border-left: solid 1px #000000; border-top: solid 1px #000000; }
.blk-b .brackets-box:after,.brackets-box:after { border-right: solid 1px #000000; border-bottom: solid 1px #000000; }

/* color blk-l {#e0e0e0} */
.blk-l .note { background-image: linear-gradient(180deg, #e0e0e0 1px, transparent 1px); /* 罫線の色と太さ  */ }
.blk-l .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #e0e0e0 1px, transparent 1px);}
.blk-l .on-b-box { border: solid 3px #e0e0e0; }
.blk-l .on-b-box .box-title { background-color: #ffffff; color: #e0e0e0; }
.blk-l .top-b-box { border: solid 3px #e0e0e0; }
.blk-l .top-b-box .box-title { background: #e0e0e0; color: #ffffff; }
.blk-l .in-b-box { border: solid 2px #e0e0e0; }
.blk-l .in-b-box .box-title { background: #e0e0e0; color: #ffffff; }
.blk-l .over-b-box { border-top: solid 2px #e0e0e0; border-bottom: solid 2px #e0e0e0; }
.blk-l .over-b-box:before, .blk-l .over-b-box:after{ background-color: #e0e0e0; }
.blk-l .brackets-box:before{ border-left: solid 1px #e0e0e0; border-top: solid 1px #e0e0e0; }
.blk-l .brackets-box:after { border-right: solid 1px #e0e0e0; border-bottom: solid 1px #e0e0e0; }


/* color blu-b {#0d47a1} */
.blu-b .note { background-image: linear-gradient(180deg, #0d47a1 1px, transparent 1px); /* 罫線の色と太さ  */ }
.blu-b .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #0d47a1 1px, transparent 1px);}
.blu-b .on-b-box { border: solid 3px #0d47a1; }
.blu-b .on-b-box .box-title { background-color: #ffffff; color: #0d47a1; }
.blu-b .top-b-box { border: solid 3px #0d47a1; }
.blu-b .top-b-box .box-title { background: #0d47a1; color: #ffffff; }
.blu-b .in-b-box { border: solid 2px #0d47a1; }
.blu-b .in-b-box .box-title { background: #0d47a1; color: #ffffff; }
.blu-b .over-b-box { border-top: solid 2px #0d47a1; border-bottom: solid 2px #0d47a1; }
.blu-b .over-b-box:before, .blu-b .over-b-box:after{ background-color: #0d47a1; }
.blu-b .brackets-box:before{ border-left: solid 1px #0d47a1; border-top: solid 1px #0d47a1; }
.blu-b .brackets-box:after { border-right: solid 1px #0d47a1; border-bottom: solid 1px #0d47a1; }


/* color blu-l {#bbdefb} */
.blu-l .note { background-image: linear-gradient(180deg, #bbdefb 1px, transparent 1px); /* 罫線の色と太さ  */ }
.blu-l .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #bbdefb 1px, transparent 1px);}
.blu-l .on-b-box { border: solid 3px #bbdefb; }
.blu-l .on-b-box .box-title { background-color: #ffffff; color: #bbdefb; }
.blu-l .top-b-box { border: solid 3px #bbdefb; }
.blu-l .top-b-box .box-title { background: #bbdefb; color: #ffffff; }
.blu-l .in-b-box { border: solid 2px #bbdefb; }
.blu-l .in-b-box .box-title { background: #bbdefb; color: #ffffff; }
.blu-l .over-b-box { border-top: solid 2px #bbdefb; border-bottom: solid 2px #bbdefb; }
.blu-l .over-b-box:before, .blu-l .over-b-box:after{ background-color: #bbdefb; }
.blu-l .brackets-box:before{ border-left: solid 1px #bbdefb; border-top: solid 1px #bbdefb; }
.blu-l .brackets-box:after { border-right: solid 1px #bbdefb; border-bottom: solid 1px #bbdefb; }

/* color red-b {#CC0000} */
.red-b .note { background-image: linear-gradient(180deg, #CC0000 1px, transparent 1px); /* 罫線の色と太さ  */ }
.red-b .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #CC0000 1px, transparent 1px);}
.red-b .on-b-box { border: solid 3px #CC0000; }
.red-b .on-b-box .box-title { background-color: #ffffff; color: #CC0000; }
.red-b .top-b-box { border: solid 3px #CC0000; }
.red-b .top-b-box .box-title { background: #CC0000; color: #ffffff; }
.red-b .in-b-box { border: solid 2px #CC0000; }
.red-b .in-b-box .box-title { background: #CC0000; color: #ffffff; }
.red-b .over-b-box { border-top: solid 2px #CC0000; border-bottom: solid 2px #CC0000; }
.red-b .over-b-box:before, .red-b .over-b-box:after{ background-color: #CC0000; }
.red-b .brackets-box:before{ border-left: solid 1px #CC0000; border-top: solid 1px #CC0000; }
.red-b .brackets-box:after { border-right: solid 1px #CC0000; border-bottom: solid 1px #CC0000; }

/* color red-l {#f8bbd0} */
.red-l .note { background-image: linear-gradient(180deg, #f8bbd0 1px, transparent 1px); /* 罫線の色と太さ  */ }
.red-l .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #f8bbd0 1px, transparent 1px);}
.red-l .on-b-box { border: solid 3px #f8bbd0; }
.red-l .on-b-box .box-title { background-color: #ffffff; color: #f8bbd0; }
.red-l .top-b-box { border: solid 3px #f8bbd0; }
.red-l .top-b-box .box-title { background: #f8bbd0; color: #ffffff; }
.red-l .in-b-box { border: solid 2px #f8bbd0; }
.red-l .in-b-box .box-title { background: #f8bbd0; color: #ffffff; }
.red-l .over-b-box { border-top: solid 2px #f8bbd0; border-bottom: solid 2px #f8bbd0; }
.red-l .over-b-box:before, .red-l .over-b-box:after{ background-color: #f8bbd0; }
.red-l .brackets-box:before{ border-left: solid 1px #f8bbd0; border-top: solid 1px #f8bbd0; }
.red-l .brackets-box:after { border-right: solid 1px #f8bbd0; border-bottom: solid 1px #f8bbd0; }

/* color grn-b {#00B900} */
.grn-b .note { background-image: linear-gradient(180deg, #00B900 1px, transparent 1px); /* 罫線の色と太さ  */ }
.grn-b .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #00B900 1px, transparent 1px);}
.grn-b .on-b-box { border: solid 3px #00B900; }
.grn-b .on-b-box .box-title { background-color: #ffffff; color: #00B900; }
.grn-b .top-b-box { border: solid 3px #00B900; }
.grn-b .top-b-box .box-title { background: #00B900; color: #ffffff; }
.grn-b .in-b-box { border: solid 2px #00B900; }
.grn-b .in-b-box .box-title { background: #00B900; color: #ffffff; }
.grn-b .over-b-box { border-top: solid 2px #00B900; border-bottom: solid 2px #00B900; }
.grn-b .over-b-box:before, .grn-b .over-b-box:after{ background-color: #00B900; }
.grn-b .brackets-box:before{ border-left: solid 1px #00B900; border-top: solid 1px #00B900; }
.grn-b .brackets-box:after { border-right: solid 1px #00B900; border-bottom: solid 1px #00B900; }

/* color grn-l {#b9f6ca} */
.grn-l .note { background-image: linear-gradient(180deg, #b9f6ca 1px, transparent 1px); /* 罫線の色と太さ  */ }
.grn-l .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #b9f6ca 1px, transparent 1px);}
.grn-l .on-b-box { border: solid 3px #b9f6ca; }
.grn-l .on-b-box .box-title { background-color: #ffffff; color: #b9f6ca; }
.grn-l .top-b-box { border: solid 3px #b9f6ca; }
.grn-l .top-b-box .box-title { background: #b9f6ca; color: #ffffff; }
.grn-l .in-b-box { border: solid 2px #b9f6ca; }
.grn-l .in-b-box .box-title { background: #b9f6ca; color: #ffffff; }
.grn-l .over-b-box { border-top: solid 2px #b9f6ca; border-bottom: solid 2px #b9f6ca; }
.grn-l .over-b-box:before, .grn-l .over-b-box:after{ background-color: #b9f6ca; }
.grn-l .brackets-box:before{ border-left: solid 1px #b9f6ca; border-top: solid 1px #b9f6ca; }
.grn-l .brackets-box:after { border-right: solid 1px #b9f6ca; border-bottom: solid 1px #b9f6ca; }

/* color yll-b {#ff6d00} */
.yll-b .note { background-image: linear-gradient(180deg, #ff6d00 1px, transparent 1px); /* 罫線の色と太さ  */ }
.yll-b .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #ff6d00 1px, transparent 1px);}
.yll-b .on-b-box { border: solid 3px #ff6d00; }
.yll-b .on-b-box .box-title { background-color: #ffffff; color: #ff6d00; }
.yll-b .top-b-box { border: solid 3px #ff6d00; }
.yll-b .top-b-box .box-title { background: #ff6d00; color: #ffffff; }
.yll-b .in-b-box { border: solid 2px #ff6d00; }
.yll-b .in-b-box .box-title { background: #ff6d00; color: #ffffff; }
.yll-b .over-b-box { border-top: solid 2px #ff6d00; border-bottom: solid 2px #ff6d00; }
.yll-b .over-b-box:before, .yll-b .over-b-box:after{ background-color: #ff6d00; }
.yll-b .brackets-box:before{ border-left: solid 1px #ff6d00; border-top: solid 1px #ff6d00; }
.yll-b .brackets-box:after { border-right: solid 1px #ff6d00; border-bottom: solid 1px #ff6d00; }

/* color yll-l {#ffd600 } */
.yll-l .note { background-image: linear-gradient(180deg, #ffd600 1px, transparent 1px); /* 罫線の色と太さ  */ }
.yll-l .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #ffd600 1px, transparent 1px);}
.yll-l .on-b-box { border: solid 3px #ffd600; }
.yll-l .on-b-box .box-title { background-color: #ffffff; color: #ffd600; }
.yll-l .top-b-box { border: solid 3px #ffd600; }
.yll-l .top-b-box .box-title { background: #ffd600; color: #ffffff; }
.yll-l .in-b-box { border: solid 2px #ffd600; }
.yll-l .in-b-box .box-title { background: #ffd600; color: #ffffff; }
.yll-l .over-b-box { border-top: solid 2px #ffd600; border-bottom: solid 2px #ffd600; }
.yll-l .over-b-box:before, .yll-l .over-b-box:after{ background-color: #ffd600; }
.yll-l .brackets-box:before{ border-left: solid 1px #ffd600; border-top: solid 1px #ffd600; }
.yll-l .brackets-box:after { border-right: solid 1px #ffd600; border-bottom: solid 1px #ffd600; }

/* color blw-b {#5d4037} */
.blw-b .note { background-image: linear-gradient(180deg, #5d4037 1px, transparent 1px); /* 罫線の色と太さ  */ }
.blw-b .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #5d4037 1px, transparent 1px);}
.blw-b .on-b-box { border: solid 3px #5d4037; }
.blw-b .on-b-box .box-title { background-color: #ffffff; color: #5d4037; }
.blw-b .top-b-box { border: solid 3px #5d4037; }
.blw-b .top-b-box .box-title { background: #5d4037; color: #ffffff; }
.blw-b .in-b-box { border: solid 2px #5d4037; }
.blw-b .in-b-box .box-title { background: #5d4037; color: #ffffff; }
.blw-b .over-b-box { border-top: solid 2px #5d4037; border-bottom: solid 2px #5d4037; }
.blw-b .over-b-box:before, .blw-b .over-b-box:after{ background-color: #5d4037; }
.blw-b .brackets-box:before{ border-left: solid 1px #5d4037; border-top: solid 1px #5d4037; }
.blw-b .brackets-box:after { border-right: solid 1px #5d4037; border-bottom: solid 1px #5d4037; }

/* color blw-l {#bcaaa4} */
.blw-l .note { background-image: linear-gradient(180deg, #bcaaa4 1px, transparent 1px); /* 罫線の色と太さ  */ }
.blw-l .dashed-note { background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
                    linear-gradient(180deg, #bcaaa4 1px, transparent 1px);}
.blw-l .on-b-box { border: solid 3px #bcaaa4; }
.blw-l .on-b-box .box-title { background-color: #ffffff; color: #bcaaa4; }
.blw-l .top-b-box { border: solid 3px #bcaaa4; }
.blw-l .top-b-box .box-title { background: #bcaaa4; color: #ffffff; }
.blw-l .in-b-box { border: solid 2px #bcaaa4; }
.blw-l .in-b-box .box-title { background: #bcaaa4; color: #ffffff; }
.blw-l .over-b-box { border-top: solid 2px #bcaaa4; border-bottom: solid 2px #bcaaa4; }
.blw-l .over-b-box:before, .blw-l .over-b-box:after{ background-color: #bcaaa4; }
.blw-l .brackets-box:before{ border-left: solid 1px #bcaaa4; border-top: solid 1px #bcaaa4; }
.blw-l .brackets-box:after { border-right: solid 1px #bcaaa4; border-bottom: solid 1px #bcaaa4; }

/* tool tip */
.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 75px;
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 3px 8px;
  border-radius: 3px;
  opacity: 0;
  transition: top 0.1s ease-in-out, left 0.1s ease-in-out, opacity 0.3s ease-in-out;
}
.tooltip:after {
  content: " ";
  position: absolute;
  bottom: -12px;
  left: calc(50% - 6px);
  border-width: 6px;
  border-style: solid;
  border-color: transparent;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.tooltip.show {
  opacity: 1;
}