@charset "utf-8";
/*=============================================================
Common Layout
=============================================================*/

/* #topicPath
---------------------------------------------------*/
#topicPath li,
#topicPath li a{
}
/*
---------------------------------------------------*/
.boxRelative{
position:relative;
}

/* back
---------------------------------------------------*/
#pre20bl{
background-image: url(/workshop/img/pre20_bg_bl.png);
background-repeat:repeat;
background-size: 39px auto;
background-color:#FFFFFF;
padding-bottom:3em;
}
#pre20or{
background-image: url(/workshop/img/pre20_bg_or.png);
background-repeat:repeat;
background-size: 39px auto;
background-color:#FFFFFF;
padding:3em 0;
}
#pre20grn{
background-image: url(/workshop/img/pre20_bg_grn.png);
background-repeat:repeat;
background-size: 39px auto;
background-color:#FFFFFF;
padding:3em 0;
}

.boxContentsPT10{
padding-top:10px;
}

.boxContentsFrost{
background-color:rgba(255,255,255,0.8);
border-radius:10px;
}

.boxContentsYe{
background-image: url(/workshop/img/pre20_bg_ppye.png);
background-repeat:repeat;
background-size: 100px auto;
padding:10px 0 40px;
width:80%;
filter: drop-shadow(2px 2px 1px rgba(174,174,174,0.6));
}
.boxYe{
margin-bottom:1em;
}

.bg_futaba{
background-image: url(/workshop/img/pre20_i_futabachan.png);
background-repeat:no-repeat;
background-size: auto;
background-position: right 0 bottom 0;
background-color:rgba(255,255,255,0.8);
background-blend-mode:lighten;
}

br.dspbr{display: none;}

/****** Smartphones +*****************/

@media only screen and ( max-width: 768px ){
br.dspspbr{display: none;}

.dsp-inlineBlock{ display:inline;}

.boxContentsYe{
background-image:none;
filter: drop-shadow:none;
padding:10px 0;
width:90%;
}

.boxYe{
background-image: url(/workshop/img/pre20_bg_ppye.png);
background-repeat:repeat;
background-size: 100px auto;
margin:1em auto 30px -20px;
padding:1em 1em 1.5em 1em;
width:90%;
min-width:265px;
filter: drop-shadow(1px1px 1px rgba(174,174,174,0.6));
}
.ttlLeadS{ font-size:14px;}
.boxOr{
background-image: url(/workshop/img/pre20_bg_ppor.png);
background-repeat:repeat;
background-size: 100px auto;
margin:20px -20px 0 auto;
padding:1em 1em 1.5em 1em;
width:90%;
min-width:265px;
filter: drop-shadow(1px 1px 1px rgba(174,174,174,0.6));
}

.boxContentsFrost{ max-width:95%;}

.bg_futaba{
background-size: 80px;
background-position: right 50% bottom 0;
}

}

/*=============================================================
MAIN
=============================================================*/
#ttlOuter{
}

/*
#ttlOuter > figure {
width: 100%;
max-width: 1040px; padding-top:50px;
display: block;
margin: 0 auto 2em;
}
*/

#ttlOuter > picture {
width: 100%;
max-width: 1040px; padding-top:50px;
display: block;
margin: 0 auto 2em;
}

#ttl{
width: 100%;
max-width: 1040px;
padding:0 20px;
box-sizing:border-box;
margin: 0 auto;
height:140px;
position:absolute;
bottom:50%;
left:50%;
transform:translate(-50%,0);
text-shadow:0px 0px 5px #000000,0px 0px 5px #000000;
}
#ttlInner{
position:relative;
width:100%;
height:100%;
text-align:center;
color:#fff;
line-height:1.65;
text-shadow:0px 0px 5px #000000,0px 0px 5px #000000;
}
/* #ttlInner::after{
content:"";
width:660px;
height:280px;
background: rgba(0,0,0,0.5);
border-radius:20px;
position:absolute;
top:0;
left:0;
z-index:-1;
} */
#ttlTxt{
padding:10px;
position:absolute;
bottom:0;
left:0;
right:0;
}
}
#ttlInner h1{
font-size:60px;
transform:translateY(-10px);
}
@media all and (-ms-high-contrast: none){
#ttlInner h1{
transform:translateY(10px);
}
}
#ttlLead{
width:660px;
height:140px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,0);
}
#ttlLeadInner{
position:relative;
width:100%;
height:100%;
text-align:center;
color:#fff;
line-height:1.65;
}
#ttlLeadInner p{
padding:10px;
font-size:18px;
position:absolute;
top:0;
left:0;
right:0;
transform:translateY(-10px);
text-shadow:0px 0px 5px #000000,0px 0px 5px #000000;
}

.plt{font-feature-settings: "palt";}

/****** Smartphones +*****************/

@media only screen and (max-width:768px), only screen and (max-device-width:768px){
#ttlOuter{
position:relative;
}

#ttlOuter > picture {
width: 100%;
max-width: 600px; padding-top:50px;
display: block;
margin: 0 auto 2em;
}

#ttl{
width:100%;
height:auto;
background:none;
border-radius:0px;
position:absolute;
bottom:50%;
left:0;
transform:translate(0,0);
}
#ttlInner::after{
display:none;
}
#ttlTxt{
padding:0px;
position:absolute;
bottom:0;
left:0;
right:0;
transform:translate(0,50%);
}
#ttlInner h1{
font-size:26px;
transform:translateY(0px);
}
#ttlLead{
width:100%;
height:auto;
background:none;
border-radius:0px;
position:static;
transform:translate(0,0);
padding-top:10px;
}
#ttlLeadInner p{
position:static;
padding:10px;
font-size:14px;
color:#333;
letter-spacing:0;
transform:translateY(0px);
text-shadow:none;
}
.ttLeadS{font-size:16px;}
}

@media only screen and (max-width:599px){
#ttlOuter > picture {
padding-top:20px;
margin: 0;
}
br.dspbr{display:block;}
}
@media only screen and (max-width:374px){

#ttlOuter > picture {
width: 100%;
max-width: 300px; padding-top:20px;
display: block;
margin: 0 auto 2em;
}
}

/*=============================================================
grid
=============================================================*/
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 0.8fr 0.2fr 0.3fr;
gap: 10px 10px;
grid-auto-flow: row;
grid-template-areas:
"vol1 vol2 vol3"
"vol1 vol2 vol3"
"jirei jirei vol3";
}

.vol1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr 0.5fr auto;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"vol1date"
"vol1smr"
"vol1en"
"vol1video";
grid-area: vol1;
padding:0;
}
.vol1date {
grid-area: vol1date;
background-color:#CDB5AE;
padding:0.5em;
color:#512C2C;
font-weight:bold;
display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"vol1ph vol1dateR";
}
.vol1smr {
grid-area: vol1smr;
padding:1em 1em 0 1em;
background-color:#D9F1FF;
}
.vol1en {
grid-area: vol1en;
padding:1em 0 1em 1em;
background-color:#ECF9FF;
}
.vol1video {
grid-area: vol1video;
background-color:#D9F1FF;
}
.vol1ph { grid-area: vol1ph; }
.vol1dateR { grid-area: vol1dateR; }

.vol2 {
display: grid;
grid-template-columns: 1fr;
  grid-template-rows: auto 1fr 0.5fr auto;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"vol2date"
"vol2smr"
"vol2en"
"vol2video";
grid-area: vol2;
padding:0;
}
.vol2date {
grid-area: vol2date;
background-color:#CDB5AE;
padding:0.5em;
color:#512C2C;
font-weight:bold;
display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"vol2ph vol2dateR";
}
.vol2smr {
grid-area: vol2smr;
padding:1em 1em 0 1em;
background-color:#DCF9D1;
}
.vol2en {
grid-area: vol2en;
padding:1em 0 1em 1em;
background-color:#ECFDE6;
}
.vol2video {
grid-area: vol2video;
background-color:#DCF9D1;
}
.vol2ph { grid-area: vol2ph; }
.vol2dateR { grid-area: vol2dateR; }

.vol3 {
display: grid;
grid-template-columns: 1fr;
  grid-template-rows: auto 0.9fr 0.4fr 0.4fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"vol3date"
"vol3smr"
"vol3video"
"vol3en";
grid-area: vol3;
padding:0;
}
.vol3date {
grid-area: vol3date;
background-color:#CDB5AE;
padding:0.5em;
color:#512C2C;
font-weight:bold;
display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"vol3ph vol3dateR";
}
.vol3smr {
grid-area: vol3smr;
padding:1em 1em 0 1em;
background-color:#E9DFFF;
}
.vol3video{
grid-area: vol3video;
background-color:#E9DFFF;
}
.vol3en {
grid-area: vol3en;
padding:1em 0 1em 1em;
background-color:#F3EEFD;
}
.vol3ph { grid-area: vol3ph; }
.vol3dateR { grid-area: vol3dateR; }

.video {
width: 100%;
position: relative;
padding-top: 56.25%;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.vol1 img, .vol2 img, .vol3 img{
width: 80px;
border-radius: 50%;
}

.jirei {
grid-area: jirei;
padding: 40px 30px 0 0;
}

.jirei_inner{
border-radius:15px;
background-color:rgba(247,217,76,0.6);
padding:0 16px 5px;
height: 100%;
position: relative;
text-align: center;
}

.jireipdf {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"pdf19 mihiraki";
margin-top: 10px;
}
.pdf19 { grid-area: pdf19; }
.mihiraki { grid-area: mihiraki; }
.pdf19, .mihiraki{
border-radius: 40%;
background-color: #FFEED0;
padding:5px;}

.pdf19 img{
max-height: 100px; border: 1px solid #183CB2;}
.mihiraki img{
max-width: 120px; border: 1px solid #183CB2;}

.pdf19 img:hover {border: 1px solid #0079D6;}
.mihiraki img:hover {border: 1px solid #0079D6;}

.ttl_jirei{
background-color:#CDB5AE;
border-radius: 25px;
color: #410820;
font-size: 28px;
position: relative;
top:-12px;
display: inline-block;
padding: 2px 2em;
margin-bottom: 0;
}
.jireipdf p{margin: 0;}
.flex{
display:flex;
justify-content: center;
align-items: center;
}
.flex_1 { flex: 1;text-align: center; }

/****** Smartphones +*****************/
@media only screen and ( max-width: 768px ){
.container {
display: grid;
grid-template-areas:
"vol1"
"vol2"
"vol3"
"jirei";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 20px 20px;
}
.vol1, .vol2, .vol3, .jirei{
padding:0 0 30px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
@media only screen and (max-width:375px){
.vol1 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"vol1date"
"vol1smr"
"vol1en"
"vol1video";
}
.vol2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"vol2date"
"vol2smr"
"vol2en"
"vol2video";
}
.vol3 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"vol3date"
"vol3smr"
"vol3video"
"vol3en";
margin-top: 50px;
}
.vol1ph, .vol2ph, .vol3ph{text-align: center;}
.vol1ph img,.vol2ph img, .vol3ph img{ width: 160px; margin-top: 1em;}
.jirei {
grid-area: jirei;
padding: 40px 0 0 0;
}
.ttl_jirei{
background-color:#CDB5AE;
border-radius: 25px;
color: #410820;
font-size: 26px;
position: relative;
top:-12px;
display: inline-block;
padding: 2px 1em;
margin-bottom: 0;
}
.jireipdf {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px 20px;
grid-auto-flow: row;
grid-template-areas:
"pdf19"
"mihiraki";
margin-top: 10px;
}
}
/*=============================================================
ul
=============================================================*/

.ul li{
font-size:16px;
list-style:none;
text-align:center;
margin-bottom:1.5em;
}
.uld { margin: 10px; }
.uld li{ list-style: disc; margin-bottom: 10px;}

/*=============================================================
dl
=============================================================*/
dt.en_title {
padding: 2px 10px 2px 10px;
margin-left: -12px;
margin-top: 0;
margin-bottom: 2px;
background-color: transparent;
border-top: 1px solid #512C2C;
border-bottom: 1px solid #512C2C;
border-right: 1px solid #512C2C;
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
display:inline-block;
background-color:#EBDFDB;
color:#512C2C;
}

p.en_title {
padding: 2px 10px 2px 10px;
margin-left:0;
margin-top: 1em;
margin-bottom: 0.5em;
background-color: transparent;
border-top: 1px solid #512C2C;
border-bottom: 1px solid #512C2C;
border-right: 1px solid #512C2C;
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
display: table;
background-color:#EBDFDB;
color:#512C2C;
font-size: 14px;
}



/*=============================================================
font
=============================================================*/
.vol1date p, .vol2date p, .vol3date p, .vol2date p{ font-size:26px; line-height: 1.5;}
.vol1date p span, .vol2date p span, .vol3date p span{ font-size:16px; line-height: 1;}
.vol1date p span.time, .vol2date p span.time, .vol3date p span.time{ font-size:22px;}
.h2{ font-feature-settings: "palt";}
h4{
  font-size:18px;
  font-weight: 600;
  font-feature-settings: "palt";
}

/****** Smartphones +*****************/

@media only screen and (max-width:599px){
.vol1date p, .vol2date p, .vol3date p, .vol2date p{ font-size:22px; line-height: 1.5;}
.vol1date p span, .vol2date p span, .vol3date p span{ font-size:16px;}
.vol1date p span.time, .vol2date p span.time, .vol3date p span.time{ font-size:14px;}
p, .ul li {font-size:14px;}
h2{
font-size:24px;
padding:0 0 30px;
}
h3{
padding:20px 0 16px;
font-size:20px;
}
.h2{
font-size:24px;
padding:0 0 30px;
}
.h3{
padding:20px 0 16px;
font-size:20px;
}
.h4{
padding:20px 0 16px;
font-size:18px;
}
.
}

/*=============================================================
btn
=============================================================*/
.vol1date, .vol2date, .vol3date{position: relative; font-feature-settings: "palt";}
.vol1date .pre20btn , .vol2date .pre20btn , .vol3date .pre20btn  {
box-shadow: 2px 2px 0px 0px #6e7e80;
background-color:#478ea8;
border-radius:5px;
border:1px solid #29668f;
display:inline-block;
color:#ffffff;
font-size:16px;
font-weight:bold;
padding:10px;
text-decoration:none;
position: absolute; right:10px; bottom:30px;
}
.pre20btn:hover {
background-color:#227391;
color:#ffffff;
text-decoration:none;
}
.pre20btn.disabled,
.pre20btn:disabled {
color: #ffffff !important;
background-color: #666 !important;
border-color: #666 !important;
}
/****** Smartphones +*****************/
@media only screen and (max-width:599px){
.vol1date .pre20btn , .vol2date .pre20btn {
font-size:14px;
font-weight:bold;
padding:3px;
position: absolute; right:8px; bottom:8px;
}
}

/*=============================================================
news
=============================================================*/

.news{
position: relative;
margin:60px auto 40px;
padding: 20px 20px;
border: solid 3px #C25A72;
border-radius: 8px;
text-align: left;
width: 50%;
}
.news_title {
position: absolute;
display: inline-block;
top: -15px;
left: 10px;
padding: 0 12px;
line-height: 1.5;
font-size: 20px;
background: #C25A72;
color: #FFF;
font-weight: bold;
border-radius: 25px;
}
.news ul{margin-left: 3em;}
.news ul li {
list-style: square;
font-size:16px;
line-height: 1.5;
}
.bdr_dash{
border-bottom: 2px dashed #C25A72;
margin-bottom: 1.5em;
padding-bottom: 0.5em;
}

/****** Smartphones +*****************/

@media only screen and (max-width:765px){
.news{
position: relative;
margin:20px 10px;
padding: 10px;
border: solid 3px #C25A72;
border-radius: 8px;
background-color: #E6DCD9;
text-align: left;
width: auto;
}
.news_title {
font-size: 16px;
}
.news ul{margin-left: 1em; margin-top: 7px;}
.news ul li {
font-size:14px;
}
}