@import "/common/css/resp_sp_v2.css";
/* -------------------------------------
GANREF
Copyright (c) 2019 Impress Corporation. All rights reserved.
------------------------------------- */

.sp-page {
margin: 10px;
position: relative;
font-size: 1rem;
}

p.caption {
font-size: 1rem;
font-weight: bold;
color: #333;
line-height: 1.2rem;
text-align: left;
}

.contents h3{
font-size: 1rem;
font-weight: bold;
color: #4F1D21;
margin: 0.5em 0;
padding: 0.8em 0 0.4em 0;
border-top: 2px dotted #E3DEDB;
clear: both;
}

/* === .zoom === */
.zoom{
display:inline-block;
position:relative;
vertical-align:top;
}
.zoom:after{
content:"";
width:22px;
height:22px;
background:url(img/zoom.png) no-repeat 0 0;
position:absolute; bottom:5px; right:5px;
}
.zoom:hover:after{ background-position:-22px 0; }
span.zoom:after{ display:none; }

/**/


.ext-link::before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "";
margin-right: 0.2rem;
}

/* === .title-area === */

.title-area {
padding: 0 0 10px;
}

.title-area h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url(img/h1.png) no-repeat;
background-size: 100%;
padding-top: 12%;
margin: 0;
}

.title-area>img {
margin-bottom: 10px;
}


.title-area ul {
width: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
margin: 0;
}

.title-area ul li {
flex-basis:33.33%;

}
.title-area ul li .ganref,
.title-area ul li .dcm,
.title-area ul li .dcw{
display: block;
width: 100%;
padding-top: 22%;
height: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: no-repeat center bottom;
background-size:contain;
font-size: 0px;
}

.title-area ul li .ganref {background-image: url(img/ganref.png);}

.title-area ul li .dcw {background-image: url(img/dcw.png);}

.title-area ul li .dcm {background-image: url(img/dcm.png);}

.subtitle{
font-weight:bold;
text-align:center;
color:#fff;
padding:5px;
background:#000;
border-top:1px solid #666;
}

.subtitle em {
color: #f00;
font-weight: bold;
font-style: normal;
}

/* === #schedule === */

#schedule > dl{
padding: 3px;
background: #F2EDEA;
}
#schedule > dl > dt,
#schedule > dl > dd{
padding:10px;
border:1px solid #fff;
}
#schedule > dl > dt{
font-weight:bold;
text-align:center;
color:#4F1D21;
padding-bottom:0.5em;
border-width:1px 1px 0;
}
#schedule > dl > dd{
padding-top:1em;
}
#schedule table{ width:100%; }

#schedule th{
display: block;
border-left: 4px solid #4F1D21;
padding-left: 6px;
}

#schedule td{
display: block;
margin: 5px 0 1rem 10px;
}

#schedule td[colspan="2"]{
padding:0.5em 0 0 0;
border-top:1px solid #fff;
margin-left: 0;
}


.thumbUsr90 {margin-right: 10px;}

#schedule .present {
padding: 1rem;
border: 1px solid #AA393F;
background-color: #fff;
overflow: hidden;
}

#schedule .present p {
margin: 0 !important;
}

#schedule .present p img {
/*float: right;*/
margin: 0 auto 10px;
text-align: center;
display: block;

}


/* === .photos === */
.photos {
border-top: 1px dotted #cabab1;
padding-top: 10px;
text-align: center;
}


.photos ul{
margin: 1rem 0;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.photos ul li {
flex-basis: 32%;
}

.photos ul li a{
position: relative;
display: block;
border:1px solid #ccc;
width: 100%;
background: #fff;
margin-bottom: 5px;
}


.photos ul li a::before{
content:"";
display: block;
padding-top: 100%; /* 高さを幅の100%に固定 */
}

.photos ul li a img {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 96%;
max-height: 96%;
box-sizing: border-box;
margin: auto;
}


/* === #detail === */


#detail h3 + ul{ margin-bottom:1rem; }

#detail li{
list-style-type:disc;
line-height:1.4;
margin:0.4em 0 0.4em 1.5em;
}
#detail .notes{
display:inline-block;
margin:0.5em 0 0;
}
#detail li .notes{ margin-top:0; }
#detail .related{
border-top-width:0;
padding-top:0;
}


/* === #apply === */

#apply{
text-align:center;
border-top:4px double #E3DEDB;
padding-top: 1rem;
}

#apply p:first-child{ color:#CB1613; }

.btn-entry a{
display:block;
width: 70%;
margin: 0 auto;
font-size:1.2rem;
font-weight:bold;
text-decoration:none;
color:#fff;
padding:8px;
background:-moz-linear-gradient(top, #cc0000, #8F0000);
background:-webkit-gradient(linear,left bottom,left top,color-stop(0, #8F0000),color-stop(1, #cc0000));
background:linear-gradient(to top, #cc0000, #8F0000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cc0000', endColorstr='#8F0000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cc0000', endColorstr='#8F0000')";
zoom:1;
border:1px solid #8F0000;
border-radius:6px;
box-shadow:1px 1px 3px rgba(0,0,0,.6),
1px 1px 0 rgba(255,255,255,.5) inset,
-1px -1px 0 rgba(255,255,255,.2) inset;
}


/*************************************************************************/
/* form */
/*************************************************************************/

.formArea {
clear:both;
margin:1.5em 0 !important;
}

.formArea * {
text-decoration:none !important;
font-size:1rem;
}

.formArea h2{
text-align:center;
font-weight:bold;
color:#666;
padding:0.5em 0;
margin-top:1em;
border-top:1px dotted #999;
}

.formArea h3{
font-size:90%;
color:#fff;
padding:2px 8px;
background-color:#777;
}

.formArea dl {
margin-bottom: 1em;
background: #f6f6f6;
padding-top:1em;
}

.formArea dl dt {
border-left: 4px solid #999;
padding: 0 10px;
margin: 0 0 0.5em 1em
}

.formArea dl dd {
padding:0 0.5rem 1rem;
border-bottom:1px dotted #ccc;
margin:0 0.5em 1em;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
-ms-align-items: center;
align-items: center;
}

.formArea dd label{
margin:0 1rem 4px 0;
padding: 4px;
}

.formArea dd label:first-child{
margin-left:0 !important;
}

.formArea dl dd input[type="text"] ,
.formArea dl dd textarea {
width: 80%;
border-radius: 3px;
padding:0.3rem;
border:solid 1px #ccc;
margin: 0 0.3rem 0.3rem 0;
}

.formArea dl dd .ex {
display: block;
}

/*.formArea label{
font-size:0.8rem;
display:inline-block;
line-height:1.2em;
padding-bottom:0.5em;
width:100%;
line-height:1.2rem;
font-size: 1rem;
white-space: nowrap;
}*/

.formArea .col2 label{
margin-bottom:0.5rem;
vertical-align:top;
}

.formArea .col4 label{
width:24%;
margin-bottom:1rem;
}

.formArea label input{margin-right:0.3em;}

.formArea .necessary{
display:inline;
font-size:85%;
font-weight:bold;
color:#d33;
padding-left:0.2em;
border-left:0;
}

.formArea input {font-weight:500;}

.formArea dl dd:last-child {border-bottom:none;}

.formArea dl dd textarea {
width:70%;
height:5em;
}

.formArea dt span,
.formArea dd span{
color:#777;
font-size:0.9em;
}

.formArea dl dd p {margin-bottom: 0.5em;}

.formArea dl dd .p-postal-code,
.formArea dl dd .p-region {
width: 100px !important;
}

.formArea dl dd .caption {
flex-basis: 100%;
margin-top: 0.8rem;
}

.btnArea {
text-align:center;
margin-bottom:2em;
}

.btnArea input {
padding:5px;
margin:0 5px;
width:7rem;
font-size:1rem;
}

.thanks{
padding:1rem;
margin:1em auto 1.5em auto;
border:1px dashed #FFB500;
background:#fffed0;
box-sizing: border-box;
font-size: 1rem;
}

.links {
margin:0 0 1rem 0;
}

.links li {
border-top: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
padding: 0.6rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

.links li:last-child {
border-bottom: 1px solid #e5e5e5;
}

.links li i::after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "";
color: #0D47A1;
}

.links li a {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; 
margin-right:1em;
}


.profile dt {margin-right: 15px;}.profile dt img {
width: 100px;
float: left;
margin: 0 10px 10px 0;
}

#intro .link {
border: 2px solid #67a9aa;
border-radius: 6px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px;
margin-bottom: 1rem;
text-decoration: none;
}

#intro .link img {
margin-bottom: 10px;
}

#intro .link p {
margin-bottom: 0;
}