@charset "utf-8";
/***************************************************
information
  filename : app_user.css;
***************************************************/

.artc_title_t2 h2,.artc_title h2{border-top:1px solid #acacac;border-bottom:1px solid #acacac;}
.artc_title_t4 h3{background:#f2f2f2;border-radius:8px;}
@media screen and (max-width:540px){
.artc_title_t4 h3{padding:8px 16px;}
}

/*************** パーツ関係 ***************/

/* ボタン */
a.btW300, button.btW300{
  max-width: 300px;
  margin-left:auto;
  margin-right:auto;
  padding: 16px 0px;
  font-size: 16px;
}
a.btW350, button.btW350{
  max-width: 350px;
  margin-left:auto;
  margin-right:auto;
  padding: 16px 0px;
  font-size: 16px;
}

/* DTタグ指定共通（横並び） */
.DLDDBox {}
.DLDDBox {width:90%;margin: 30px auto;padding: 0;font-size:14px;border-top: 1px solid #dddddd;}
.DLDDBox dl {margin: 0 auto;padding: 0;border-bottom: 1px solid #dddddd;}
.DLDDBox dt {float:left;width:20%;margin: 0 auto;padding: 10px;}
.DLDDBox dd {float:left;width:80%;margin: 0 auto;padding: 10px;}
.DLDDBox dl.bga {background: #fff;}
.DLDDBox dl.bgb {background: #f5f5f5;}

.snsblck_01 .snsblckArea{
background:#e3e3e3;
}

.snsblckAreaInn a:visited{
color:white;
padding: 1.3rem 1rem 1rem 1rem;
font-size: 3.0rem;
}

.snsblckAreaInn a:link{
color:white;
padding: 1.3rem 1rem 1rem 1rem;
font-size: 3.0rem;
}

.ptLayoutInn ul.snsblckAreaInn a {
border-radius: 10%;
background:black;
}

.what_spirits .conVisual{
background: url(https://spirits-club.co.jp/edit/file/contents/guide/guide_bg.png) center top no-repeat;
}

.what_spirits .conVisual img {
width: auto;
margin: 0px auto;
}

.what_spirits .ptWdM{
width: 100%;
}

.articleBox .bgtype01 {
background: url(https://spirits-club.co.jp/edit/file/contents/what_spirits/bgtype01.png) center top no-repeat;
background-color: black;
}

.bgBoxAre .bgtype01{
width: 100%;
}

.articleBox h3{
border-left:none;
font-weight: bold;
}

.what_spirits .articleBox{
max-width: 100%;
}

.articleBox p.bgBoxTxtC, .articleBox p.bgBoxTxtL{
color: white;
}

@media screen and (max-width:540px){
.articleBox .inboxS{
width: 100%;
}

.articleBox p.bgBoxTxtC, .articleBox p.bgBoxTxtL{
width: 90%;
}
}

h1.conTitle{
margin-bottom: 1px;
padding: 10px 0;
text-align: center;
border-top: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
color: #000;
font-size: 22px;
}

@media screen and (max-width:540px){
h1.conTitle{font-size: 18px;}
}

p.txtD{
font-size: 32px;
line-height: 1.2em;
}

p.txtE{
font-size: 50px;
line-height: 1.2em;
font-family: "Impact", serif;
opacity: 0.5;
}

.spirits_guidearea{
background-size: cover;
}

.ListType1 .tpl-flexcolumn3 .column .ListMainTitle{
font-size: 16px;
}

@media screen and (max-width:540px) {
 h2.ListMainTitle{
 padding:0px;
text-align:left;
}
}

p.run_ecn .articleBox .inbox{
width: 80%;
}

.ListBox .column p.txt, .ListBox .column .person .prof{
font-size: 14px;
}

.ListBox.ListType1.liwbg01 .column{
box-shadow: none;
-webkit-box-shadow: none;
border: none;
}

.morebtn a{
margin-top: 15px;
}

.ListBox.ListType2.liwbg01 .clmDetail, .ListBox.ListType4.liwbg01 .clmDetail{
box-shadow: none;
-webkit-box-shadow: none;
border: none;
}

.ListBox .column .ListMainTitle a{
font-size: 26px;
}

@media screen and (max-width:540px){
.ListBox .column .ListMainTitle a {
    font-size: 15px;
}
.ListType2.liimgY .tpl-flexcolumn3 figure.image{
height:78px;
}
}

.articleBox .bgtype02{
background: url(https://spirits-run.com/images/site/bgtype02.png) center top no-repeat;
}

.articleBox p.cnt{
padding: 10px;
}

.acl2 .clm-inn{
margin: auto;
float: none;
}

.artc_title h3,.artc_title_t4_2 h3{
font-size: 32px;
}
@media screen and (max-width:540px){
.artc_title h3,.artc_title_t4_2 h3{
font-size: 24px;
}
}

.articleBox .artc_title_t3 h3{
color: white;
}

.articleBox h2{
font-weight: bold;
}

.ContentNo_2 .con_visual,.ContentNo_1 .con_visual{
background:   url(https://spirits-run.com/images/site//w_run_bg.jpg);
width: 100%;
}


.conVisual img{
width: 650px;
}

.qa_list .tpl-contents-block .tpl-flexcolumn3 .column{
float: none;
}
.qa_list .tpl-contents-block .tpl-flexcolumn3 .column.col2{
margin:auto;
border:1px solid #ddd;
padding:20px 24px 12px;
border-radius:4px;
}
.qa_list .ListType2 .tpl-flexcolumn3 .column .ListMainTitle{
font-size:18px;
position:relative;
}
.qa_list .column h2:before{
position:absolute;
content:' ';

}

/* ２本の線を.icon-wrapの中央に並行に重ねる */
.qa_list .column h2:before,
.qa_list .column h2:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #acacac;
  right: 10px;
  top: 50%;
  width: 20px;
  height: 2px;
  transform: translate(-50%, -50%);
}
/* そのうち1本を縦にする */
.qa_list .column h2:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* プラスアイコンクリック後、マイナスにする */
.qa_list .column.open h2:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.answerBox{
border-top:1px solid #ddd;
margin-top:16px;
padding-top:20px;
}

.answerBox p{
padding:16px;
}

.answerBox{
display:none;
}
.open .answerBox{
display:block;
}

@media screen and (max-width:540px){
.qa_list .ListBox.ListType2.sldYblockArea .clmDetail{
width:100%;
padding:8px 0px;
}

.qa_list .tpl-contents-block .tpl-flexcolumn3 .column.col2{
    padding: 12px 6px 12px 16px;
}

.qa_list .ListType2 .tpl-flexcolumn3 .column .ListMainTitle{
font-size:15px;
padding:0px 32px 0px 0px;
line-height:1.5;
}

.qa_list .column h2:before,
.qa_list .column h2:after {
  right: 0px;
  top: 50%;
  width: 20px;
  height: 2px;
}
.qa_list .spmode .tpl-contents-block .column.col2{
width:95%;
}

.answerBox{
border-top:1px solid #ddd;
margin-top:12px;
padding-top:16px;
}

.answerBox p{
font-size:14px;
padding:12px 8px;
}
}