/*************************
メディアクエリ
*************************/
@media screen and (max-width: 767px){

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}






/**************************************************************************************************

共通マージン上書き

**************************************************************************************************/
.service-detail-block{
  padding: 30px 0;

}


.page-content{
padding:50px 0;
}



/**************************************************************************************************

h2の枠なしバージョン

**************************************************************************************************/
h2.service-detail-ttl{
font-size:26px;
}


.service-detail-ttl2{
  padding: 5px 30px;
font-size:27px;
  text-align: center;
line-height:1.4em;
  letter-spacing: 0.07em;
}




/**************************************************************************************************

共通縦長タイトル

**************************************************************************************************/
.comTtl h2 {
background:#f9f4d9;
border-top:solid 2px #e2d771;
padding:15px 0;
text-align:center;
  font-size:26px;
font-weight:900;
line-height:1.45em;
margin:60px 0 0 0;
}


/**************************************************************************************************

共通枠タイトル

**************************************************************************************************/
.comTtlFrame h2 {
background:#fff;
border:solid 3px #e2d771;
padding:10px 0 15px 0;
margin:0;
text-align:center;
font-size:23px;
font-weight:900;
line-height:1.4em;
border-radius:10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px;
margin:40px 0 0 0;
}

.comTtlFrame2 h2 {
background:#fff;
border:solid 3px #e2d771;
padding:10px 0 15px 0;
margin:0;
text-align:center;
font-size:2.6rem;
font-weight:900;
line-height:1.4em;
border-radius:10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px;
margin:0 0 0 0;
}



/**************************************************************************************************

共通下向き矢印

**************************************************************************************************/
.tirangleArea {
  margin: 0 auto;
  width: 100%;
/*  中央寄せ  */
  display: flex;
  justify-content: center;
}

.triangle_bottom{
  background-color: #e2d771;
  width: 40px;
  height: 24px;
  clip-path: polygon(0 0,100% 0, 50% 100%);
}




/**************************************************************************************************

並列画像

**************************************************************************************************/
/*** 4個並び ***/
.imgFourList ul {
max-width:100%;
min-width:100%;
margin:20px auto 30px auto;
}

.imgFourList ul li:nth-child(1){
width:48%;
display:inline-block;
vertical-align:top;
margin:0 2% 2% 0;
}

.imgFourList ul li:nth-child(2){
width:48%;
display:inline-block;
vertical-align:top;
margin:0 0 2% 0;
}

.imgFourList ul li:nth-child(3){
width:48%;
display:inline-block;
vertical-align:top;
margin:0 2% 0 0;
}

.imgFourList ul li:nth-child(4){
width:48%;
display:inline-block;
vertical-align:top;
margin:0 0 0 0;
}

/*** 3個並び ***/
.imgThreeList ul {
max-width:100%;
min-width:100%;
margin:30px auto 30px auto;
}

.imgThreeList img {
  width: 85%;
  height: auto;
  display: block;
  margin: 0 auto; /* 中央寄せ */
}


.imgThreeList ul li:nth-child(odd){
width:100%;
display:block;
vertical-align:top;
margin:0 auto 0 auto;
}

.imgThreeList ul li:nth-child(even){
width:100%;
display:block;
vertical-align:top;
margin:5% 0;
}


/*** 2個並び ***/
.imgDouble ul {
max-width:100%;
min-width:100%;
margin:10px auto 0 auto;
}

.imgDouble ul li:nth-child(odd){
width:100%;
display:block;
vertical-align:top;
margin:0 0 4% 0;
}

.imgDouble ul li:nth-child(even){
width:100%;
display:block;
vertical-align:top;
margin:0 0 20px 0;
}


/*** 1個並び ***/
.imgOne ul {
max-width:100%;
min-width:100%;
margin:20px auto 0 auto;
}

.imgOne ul li{
display:block;
vertical-align:top;
margin:0 auto;
text-align:center;
}

.imgOne ul li img{
width:100%;
display:block;
vertical-align:top;
margin:0 auto;
text-align:center;
}


/**************************************************************************************************

共通ボタン上のテキスト

**************************************************************************************************/
p.orderCaptionTxt {
font-size:24px;
color:#ea3750000;
font-weight:900;
line-height:1.4em;
margin:0 auto;
}


/**************************************************************************************************

共通ボタンサイズ

**************************************************************************************************/
.cta-type1-box img {
margin:0 auto;
text-align:center;
width:100%;

}




/**************************************************************************************************

共通マージン

**************************************************************************************************/
.maU50{
margin:50px auto 0 auto;
}

.maB60{
margin:0 auto 60px auto;
}


/**************************************************************************************************

Mainimg

**************************************************************************************************/

.service-top{
margin:0;
padding:0;
}

.service-mainBox{
  padding: 0 0 0 0;
margin:0;
}
.service-mainBox .inner{
  max-width: 100%;
}



/**************************************************************************************************

動画

**************************************************************************************************/

div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
}
video.vid_main {
width: 100%;
max-width: 100%;
}

/**************************************************************************************************

タッチで献金とは?

**************************************************************************************************/
.service-top-ttl{
  font-size: 27px;
  margin-top: 8px;
  line-height:  1.2;
font-weight:700;
text-align:center;
  letter-spacing: 0.1em;
}


.aboutExpBox{
background:#fff;
border:solid 2px #000;
margin:0 auto;
width:100%;
padding:20px 10px;
}

.aboutExpBox p{
  font-size:20px;
color:#ea3750;
font-weight:900;
line-height:1.4em;
}

.aboutExpBox h2{
  font-size:27px;
font-weight:900;
line-height:1.4em;
}

.featureBox ul {
margin:20px 0 0 0;
}


.featureBox ul li{
  font-size:23px;
color:#000;
font-weight:900;

}

.featureBox ul li img{
width:9%;
}

/**************************************************************************************************

導入の流れ

**************************************************************************************************/
.service-lead-block-ttl{
  font-size: 26px;
  text-decoration: underline;
  text-decoration-color: var(--color-yellow-line);
  text-underline-offset: 10px;
  text-decoration-thickness: 6px;
  line-height: 2;
text-align:center;
  white-space: nowrap;
}

.flowBox{
margin:50px auto 0 auto;
padding:5%;
width:100%;
height:auto;
position:relative;
background:#fff;
border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px;
}

.flowBox .num{
border-radius:50%;
width:50px;
height:50px;
background:#ea3750;
  font-size:2.4rem;
line-height:2.0em;
font-weight:700;
color:#fff;
text-align:center;
    position: absolute;
    top: -25px;
left:50%;
-webkit-transform: translateX(-50%);
-ms-transform:translateX(-50%);
          transform: translateX(-50%);
}

.flowBox .stepImg, .flowBox .stepImg2{
padding:20px 0 5px 0;
width:100%;
}

.flowBox .stepImg img{
width:65%;
}

.flowBox .stepImg2 img{
width:65%;
}

.flowBox h3{
color:#ea3750;
  font-size:2.6rem;
text-align:center;
line-height:1.5em;
margin:0 0 10px 0;
font-weight:700;
}

.flowBox h3 span{
  font-size:2.0rem;
margin:0 0 0 0;
}

.flowBox p{
color:#000;
font-size:16px;
text-align:left;
line-height:1.5em;
}

.flowBox p.maU{
color:#000;
font-size:16px;
text-align:left;
line-height:1.5em;
margin:15px 0 0 0;
}

.arrowBox{
text-align:center;
width:100%;
}

.arrowBox img{
width:10%;
}




/**************************************************************************************************

FAQ
**************************************************************************************************/

.faqBox {
    width:100%;
background:#f5f5f5;
padding:0 0 0 0;
margin:0 auto 60px auto;
}

.faqAccordion{
margin:30px 0 0 0;
}


.faqAccordion dt {
    cursor:pointer;
    background-image: url(../img/service/touch/open.png);
    background-size:12px auto;
    background-repeat: no-repeat;
    background-position: 97% center;
    border-bottom:dotted 1px #ccc;
    padding:20px 30px 20px 55px;
    font-size:16px;
    line-height:1.6em;
background-color:#fff;
text-align:left;
    position:relative;
}


.faqAccordion dt:before{
font-family: "Font Awesome 5 Free";
content:'Q';
 font-size:130%;
position:absolute;
color:#000;
font-weight: 900;
top:50%;
left:20px;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}

.faqAccordion dd{
    display:none;
    font-size:16px;
text-align:left;
    line-height:140%;
    border-bottom:dotted 1px #ccc;
    padding:20px 30px 20px 55px;
margin:0 0 30px 0;
    line-height:1.6em;
background-color:#fff;
    position:relative;
    }

.faqAccordion dd:before{
font-family: "Font Awesome 5 Free";
content:'A';
 font-size:130%;
position:absolute;
color:#ea3750;
font-weight: 900;
top:50%;
left:20px;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
}
.faqAccordion dd p{
margin:0 0 20px 0;
    }

.faqAccordion dt.active{
    background-image: url(../img/service/touch/close.png);
    background-size:12px auto;
}
.faqAccordion dt.over {
    background-color: #fafafa;

}