@charset "utf-8";

/*イメージング画像*/
/*PC版*/
@media screen and (min-width:1025px){

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image05{
background:url(images/contents05.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p,
.headline-image05 p{
width:250%;
margin:30px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_faq.svg)center top no-repeat;
background-size:80px 80px;
padding:90px 0 0 0;
margin:50px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 20px 30px;
padding:0 0 0 10px;
border-left:8px solid rgba(12,59,75,1);
}
article p{
margin:0 45px 20px 45px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 20px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:32.5%;
font-size:75%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents07 a{
background:url(images/contents07.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

}
/*TB版よこ*/
@media screen and (min-width:781px) and ( max-width:1024px){

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image05{
background:url(images/contents05.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p,
.headline-image05 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_faq.svg)center top no-repeat;
background-size:80px 80px;
padding:90px 0 0 0;
margin:50px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 20px 30px;
padding:0 0 0 8px;
border-left:8px solid rgba(12,59,75,1);
}
article p{
margin:0 45px 15px 45px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 20px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:100%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents07 a{
background:url(images/contents07.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

}
/*TB版たて*/
@media screen and (min-width:481px) and ( max-width:780px){

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image05{
background:url(images/contents05.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p,
.headline-image05 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_faq.svg)center top no-repeat;
background-size:80px 80px;
padding:90px 0 0 0;
margin:50px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 15px 30px;
padding:0 0 0 8px;
border-left:6px solid rgba(12,59,75,1);
}
article p{
margin:0 45px 10px 45px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 20px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents07 a{
background:url(images/contents07.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

}
/*スマホ版レイアウト*/
@media screen and (max-width:480px){
.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 80px auto;
border-radius: 50px / 50px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 80px auto;
border-radius: 50px / 50px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 80px auto;
border-radius: 50px / 50px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 80px auto;
border-radius: 50px / 50px;
}
.headline-image05{
background:url(images/contents05.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 80px auto;
border-radius: 50px / 50px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p,
.headline-image05 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_faq.svg)center top no-repeat;
background-size:60px 60px;
padding:70px 0 0 0;
margin:40px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 10px 15px;
padding:0 0 0 7px;
border-left:5px solid rgba(12,59,75,1);
}
article p{
margin:0 27px 10px 27px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 30px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents07 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
margin:0 10px -10px;
}

}


/*faqcontainer*/

@charset "utf-8";

.accordion-container {
position: relative;
width: 100%;
border-top: none;
outline: 0;
}

.accordion-container .article-title {
display: block;
position: relative;
margin: 10px 6%;
padding:0.75em 3.5em 0.75em 1.25em;
font-size: 100%;
font-weight: bold;
background:  rgba(12,59,75,1);
color: #FFF;
cursor: pointer;
border-radius: 5px / 5px;
}

.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
background-color: #E0DAC5;
color: #111;
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
color: #111;
}

.article-title{
position: relative;
}

.article-title:after {
content: "";
position: absolute;
right: 25px;
top: 32%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #FFF;
border-right: solid 2px #FFF;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

.article-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}

.accordion-content {
margin: 10px 6%;
padding:0 1.25em 0.75em 1.25em;
font-size: 100%;
display: none;
cursor: auto;
}
.accordion-content p{
margin:0 0 10px 0!important;
}

/* CSS for CodePen */
.accordion-container {
width: 100%;
margin: 1.875em auto;
}




@media screen and (min-width:1025px){
ul.contents{margin:0 45px 30px 45px;}
ul.contents li a{color:rgba(12,59,75,1);}
}

@media screen and (min-width:781px) and ( max-width:1024px){
ul.contents{margin:0 45px 30px 45px;}
ul.contents li a{color:rgba(12,59,75,1);}
}

@media screen and (min-width:481px) and ( max-width:780px){
ul.contents{margin:0 45px 30px 45px;}
ul.contents li a{color:rgba(12,59,75,1);}
}

@media screen and (max-width:480px){
ul.contents{margin:0 27px 30px 27px;}
ul.contents li a{color:rgba(12,59,75,1);}
}