@charset "utf-8";
/* CSS Document */
p {margin:0; padding:0;}
img { border:0; vertical-align:top; max-width: 100%;}
#pro {
max-width:768px;
margin: 0 auto;
padding: 0;
}
#pro_gaiyo {
max-width:768px;
margin: 0 auto;
padding: 0;
}

/*===============================================
●SP 画面の横幅が768pxまで
===============================================*/
@media only screen and (max-width: 768px) {
.pc {
display: none !important;
}
.sp {
display: block !important;
}
html,
body {
margin: 0;
padding: 0;
}
#pro {
margin: 50px auto 0px;
}
#pro_gaiyo h2 {
background: linear-gradient(to right, #fde00c, #fdff71);
background: -moz-linear-gradient(left, #fde00c, #fdff71);
background: -webkit-linear-gradient(left, #fde00c, #fdff71);
padding: 10px;
}
#pro_gaiyo h2 img {width: 50%;}
#pro_gaiyo h3 {
font-size: 14px;
line-height: 1.6em;
font-weight: bold;
margin: 20px 20px 30px;
}
#pro_gaiyo h4 {
font-size: 16px;
font-weight: bold;
margin: 20px 0px 5px;
}
/* .accordion
-------------- */
.accordion {
max-width: 100%;
background: linear-gradient(to right, #fde00c, #fdff71);
background: -moz-linear-gradient(left, #fde00c, #fdff71);
background: -webkit-linear-gradient(left, #fde00c, #fdff71);
}
.accordion img {width: 50%;}
#acc .toggle {display: none;}
.option {position: relative;}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.content {
max-height: 0;
overflow: hidden;
background-color: #fff;
text-align: justify;
text-justify: inter-ideograph;
-ms-text-justify: inter-ideograph;
padding: 0px 10px;
}
.title {
padding: 10px;
display: block;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1em;
width: 2px;
height: 1.25em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.toggle:checked + .title + .content {
max-height: 900px;
transition: all 1.5s;
padding-bottom: 1em;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}
.content ul {
}
.content li {
font-size: 15px;
line-height: 1.4em;
margin-left: 10px;
}
.content li a {
font-size: 15px;
text-decoration: underline;
}
.content section ul li:before {
font-size: 13px !important;
content: '※' !important;
margin-left: -10px;
}
/* .cp
-------------- */
.cp_end{
text-align:center; 
margin:0px; padding:10px; 
background-color:#000;
}
.cp_end h3{
font-size:18px; 
color:#FFF; 
line-height:1.3;
}
}
/*===============================================
●PC 画面の横幅が768px
===============================================*/
@media only screen and (min-width: 768px) {
.pc {
display: block !important;
}
.sp {
display: none !important;
}
#pro {
margin: 50px auto 0px;
}
#pro_gaiyo h2 {
background: linear-gradient(to right, #fde00c, #fdff71);
background: -moz-linear-gradient(left, #fde00c, #fdff71);
background: -webkit-linear-gradient(left, #fde00c, #fdff71);
padding: 15px;
}
#pro_gaiyo h3 {
font-size: 24px;
line-height: 1.6em;
font-weight: bold;
margin: 20px 20px 40px 20px;
}
#pro_gaiyo h4 {
clear: both;
font-size: 16px;
font-weight: bold;
margin: 20px 0px 5px;
}
/* .accordion
-------------- */
.accordion {
max-width: 100%;
background: linear-gradient(to right, #fde00c, #fdff71);
background: -moz-linear-gradient(left, #fde00c, #fdff71);
background: -webkit-linear-gradient(left, #fde00c, #fdff71);
}
#acc .toggle {display: none;}
.option {position: relative;}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.content {
max-height: 0;
overflow: hidden;
background-color: #fff;
text-align: justify;
text-justify: inter-ideograph;
-ms-text-justify: inter-ideograph;
}
.title {
padding: 15px;
display: block;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 2.25em;
top: 1.6em;
width: 2px;
height: 1.75em;
background-color: #999;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.toggle:checked + .title + .content {
max-height: 550px;
transition: all 1.5s;
padding-bottom: 1em;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}
.content ul {
clear: both;
margin-bottom: 20px;
}
.content li {
font-size: 15px;
line-height: 1.4em;
margin-left: 20px;
}
.content li a {
font-size: 15px;
text-decoration: underline;
}
.content section ul li:before {
font-size: 14px !important;
content: '※' !important;
margin-left: -14px;
}
/* .cp
-------------- */
.cp_end{
text-align:center; 
margin:0px; padding:20px; 
background-color:#000;
}
.cp_end h3{
font-size:24px; 
color:#FFF; 
line-height:1.3;
}
}
/*　ありがとうボタン　*/
.button03_cp {
display: block;
background: #C90027;
text-align: center;
padding: 18px 0;
position: relative;
transition: all .3s;
pointer-events: none;
}
.button03_cp span {
color: #fff;
font-size: 1.8rem;
line-height: 24px;
}
@media only screen and (min-width: 768px) {
.button03_cp {
width: 400px; }
}
@media only screen and (max-width: 768px) {
.button03_cp {
width: 100%; }
}