@charset "UTF-8";
/* CSS Document */


@keyframes txtloop {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}

@keyframes txtloop2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}


/*PC*/
@media print, screen and (min-width: 768px) {
/*MV
----------------------------------------------*/
#mv{
position: relative;
margin: 0 0 100px;
}

#mv .mv_img{
position: relative;
margin: 0 0 10px;
}

#mv .red_txt_box{
background: #121212;
padding: 25px;
box-sizing: border-box;
margin: 0 auto 60px;
}

#mv .red_txt_box h2{
font-size: 4rem;
font-weight: 900;
font-style: italic;
line-height: 1.2;
letter-spacing: -.2rem;
text-align: center;
color: #ffd22e;
margin: -50px 0 30px;
}

#mv .red_txt_box h2 span{
display: block;
font-size: 6.6rem;
color: #ffd22e;

}

#mv .red_txt_box .red_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#mv .red_txt_box .red_list li{
width: 49%;
height: 120px;
background:linear-gradient(120deg, #a68b28, #dc963c);
line-height: 1.2;
text-align: center;
color: #FFF;
font-size: 1.6rem;
font-style: italic;
font-weight: 900;
padding: 10px;
box-sizing: border-box;
margin-bottom: 1%;
border: 1px solid #ffd22e;
text-shadow: 0px 0px 2px rgba(0, 0, 0,.5);
display: flex;
align-items: center;
justify-content: center;
}

#mv .red_txt_box .red_list li span{
font-size: 1rem;
display:contents;
}

#mv .red_txt_box  article{
overflow: hidden;
position: relative;
top:0;
left: 0;
z-index: 5;
}

#mv .red_txt_box  .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#mv .red_txt_box  .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 6rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.25);
}

#mv .red_txt_box  .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#mv .red_txt_box  .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#mv .red_txt_box .red_txt{
font-size:2.2rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
margin: 0 0 50px;
}


#mv .list{
position: relative;
}

#mv .list li{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
margin: 0 0 40px;
}

#mv .list li:last-child{
margin-bottom: 0;
}

#mv .list li:nth-child(odd){
flex-direction: row;
}

#mv .list li .txt_box{
width:55%;
padding:5% 3.5%;
box-sizing: border-box;
}

#mv .list li .txt_box h2{
font-size: 2.2rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 30px;
}

#mv .list li .txt_box .txt{
font-weight: 600;
}

#mv .list li .txt_box .img_box{
padding: 10px;
box-sizing: border-box;
margin:20px 0 0;
}

#mv .list li .img{
width:45%;
box-sizing: border-box;
}


/*price
----------------------------------------------*/
#price{
position: relative;
margin: 0 0 100px;
}

#price .block2{
margin: 0 0 40px;
} 

#price .block2 .detail{
width:100%;
margin: 0 0 50px;
}

#price .block2 .detail table{
width: 100%;
border-top: 1px solid #000;
border-right: 1px solid #000;
}

#price .block2 .detail table th{
width: 20%;
padding: 10px;
box-sizing: border-box;
text-align: left;
background: #F1F1F1;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

#price .block2 .detail table td{
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

#price .block2 .detail table .b_txt{
font-size: 1.2rem;
font-weight: 800;
}

#price .block2 .detail table .s_txt{
font-size: .7rem;
line-height: 1.6;
}

#price .block2 .img{
width: 100%;
}

#price .block2 .img .slick-slide{
margin: 0 8px;
}

#price article{
overflow: hidden;
position: relative;
bottom:0;
left: 0;
z-index: 5;
}

#price .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin:60px auto 0;
}

#price .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 6rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.5);
}

#price .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#price .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#price .red_txt{
font-size:2.2rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
margin: 0 0 50px;
}

#price .btn{
padding: 15px;
box-sizing: border-box;
font-size: 1.4rem;
font-weight: 800;
line-height: 1;
text-align: center;
color:#FFF;
background: #a68b28;
}

/*area
----------------------------------------------*/
#area{
position: relative;
margin: 0 0 100px;
}

#area .red_txt{
font-size: 1rem;
font-weight: 600;
margin: 0 0 40px;
}

#area article{
overflow: hidden;
position: relative;
bottom:0;
left: 0;
z-index: 5;
}

#area .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#area .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 6rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.5);
}

#area .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#area .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

/*flow
----------------------------------------------*/
#flow{
position: relative;
margin: 0 0 100px;
}

#flow .flow_design02 {
display: flex;
justify-content: center;
align-items: center;
}

#flow .flow_design02 ul {
width: 90%;
margin: auto;
padding: 0;
}

#flow .flow_design02 li {
list-style-type: none;
}

#flow .flow_design02 dd {
margin-left: 0;
font-weight: 500;
}

#flow .flow02 > li {
padding: 40px 10px;;
}

#flow .flow02 > li:not(:last-child) {
border-bottom: 2px solid #a68b28;
position: relative;
}

#flow .flow02 > li:not(:last-child)::before,
#flow .flow02 > li:not(:last-child)::after {
content: "";
border: solid transparent;
position: absolute;
top: 100%;
left: 15%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

#flow .flow02 > li:not(:last-child)::before {
border-width: 22px;
border-top-color: #a68b28;
}

#flow .flow02 > li:not(:last-child)::after {
border-width: 18px;
border-top-color: #fff;
}

#flow .flow02 > li dl {
margin: 0;
}

#flow .flow02 > li dl dt {
font-size: 1.6rem;
font-weight: 800;
margin-bottom: 0.5em;
display: flex;
align-items: center;
}

#flow .flow02 > li dl dt .icon02 {
font-size: 1.2rem;
line-height: 1;
color: #fff;
background:linear-gradient(90deg, #a68b28, #000000);
padding: 10px 10px;
display: inline-block;
margin-right: 0.5em;
}


/*example
----------------------------------------------*/
#example{
position: relative;
margin: 0 0 100px;
}

#example .list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#example .list li{
width: 31.33%;
margin-bottom: 2%;
}

#example article{
overflow: hidden;
position: relative;
bottom:0;
left: 0;
z-index: 5;
}

#example .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#example .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 6rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.5);
}

#example .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#example .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/*faq
---------------------------------------*/
#faq{
position: relative;
margin: 0 0 100px;
}

.cp_qa04 .cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 1em 0;
color: #ffffff;
}
.cp_qa04 .cp_actab input {
display: none;
}
/* 質問 */
.cp_qa04 .cp_actab label {
position: relative;
display: block;
margin: 0 0.5em 0.5em 2em;
padding: 1em 0 2em 0;
cursor: pointer;
border-radius: 5px;
background: #dc963c;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.cp_qa04 .cp_actab label span {
display: block;
padding: 0 2em 1em 2em;
border-bottom: 1px solid #ffffff;
font-weight: 800;
}
/* --?アイコン */
.cp_qa04 .cp_actab label::before {
position: absolute;
left: -30px;
content: '？';
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
font-size: 2em;
font-weight: bold;
z-index: 99;
border: 3px solid #ffffff;
border-radius: 50%;
background: #dc963c;
}
/* --▼アイコン */
.cp_qa04 .cp_actab label::after {
position: absolute;
right: 10px;
bottom: 10px;
content: '';
width: 15px;
height: 8px;
background: #ffffff;
clip-path: polygon(0 0, 50% 100%, 100% 0);
transition: all 0.5s ease;
}
/* 答え */
.cp_qa04 .cp_actab .cp_actab-content {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
max-height: 0;
margin: 0 0 0.5em 0;
padding: 0 0 0 5em;
transition: max-height 0.5s ease;
color: #ffffff;
}
/* --!アイコン */
.cp_qa04 .cp_actab .cp_actab-content::before {
position: absolute;
left: 50px;
content: '！';
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
font-size: 2em;
font-weight: bold;
z-index: 99;
border: 3px solid #ffffff;
border-radius: 50%;
background: #121212;
}
.cp_qa04 .cp_actab .cp_actab-content p {
margin: 0.5em 0.5em 0.5em 0;
padding: 1em 1em 1em 3em;
border-radius: 0.3em;
background: #121212;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa04 .cp_actab input:checked ~ .cp_actab-content {
max-height: 40em;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa04 .cp_actab input[type=checkbox]:checked + label::after {
transform: scale(1, -1);
}






}
/*sp*/
@media only screen and (max-width: 767px) {
/*MV
----------------------------------------------*/
#mv{
position: relative;
margin: 0 0 60px;
padding: 15px 0;
box-sizing: border-box;
}

#mv .mv_img{
position: relative;
margin: 0;
}

#mv .red_txt_box{
background: #121212;
padding: 10px;
box-sizing: border-box;
margin: 0 auto 60px;
}

#mv .red_txt_box h2{
font-size: 1.8rem;
font-weight: 900;
font-style: italic;
line-height: 1.2;
letter-spacing: -.2rem;
text-align: center;
color: #ffd22e;
margin: -50px 0 30px;
}

#mv .red_txt_box h2 span{
display: block;
font-size: 2.8rem;
color: #ffd22e;
}

#mv .red_txt_box .red_list{
}

#mv .red_txt_box .red_list li{
width: 100%;
background:linear-gradient(120deg, #a68b28, #dc963c);
line-height: 1.2;
text-align: center;
color: #FFF;
font-size: 1rem;
font-style: italic;
font-weight: 900;
padding: 10px;
box-sizing: border-box;
margin-bottom: 1%;
border: 1px solid #ffd22e;
text-shadow: 0px 0px 2px rgba(0, 0, 0,.5);
}

#mv .red_txt_box .red_list li span{
font-size: .8rem;
}

#mv .red_txt_box  article{
overflow: hidden;
position: relative;
top:0;
left: 0;
z-index: 5;
}

#mv .red_txt_box  .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#mv .red_txt_box  .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.25);
}

#mv .red_txt_box  .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}

#mv .red_txt_box  .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#mv .red_txt_box .red_txt{
font-size:2.2rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
margin: 0 0 50px;
}


#mv .list{
position: relative;
}

#mv .list li{
margin: 0 0 40px;
}

#mv .list li:last-child{
margin-bottom: 0;
}

#mv .list li:nth-child(odd){
flex-direction: row;
}

#mv .list li .txt_box{
width:100%;
padding:5%;
box-sizing: border-box;
}

#mv .list li .txt_box h2{
font-size: 1.4rem;
font-weight: 800;
line-height: 1.4;
margin: 0 0 20px;
}

#mv .list li .txt_box .txt{
font-weight: 600;
}

#mv .list li .txt_box .img_box{
padding: 10px;
box-sizing: border-box;
margin:20px 0 0;
}

#mv .list li .img{
width:80%;
margin: auto;
}


/*price
----------------------------------------------*/
#price{
position: relative;
margin: 0 0 60px;
}

#price .block2{
width: 90%;
margin: 0 auto 40px;
} 

#price .block2 .detail{
width:100%;
margin: 0 0 30px;
}

#price .block2 .detail table{
width: 100%;
border-top: 1px solid #000;
border-right: 1px solid #000;
}

#price .block2 .detail table th{
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: left;
background: #F1F1F1;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
display: block;
}

#price .block2 .detail table td{
display: block;
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

#price .block2 .detail table .b_txt{
font-size: 1.2rem;
font-weight: 800;
}

#price .block2 .detail table .s_txt{
font-size: .7rem;
line-height: 1.6;
}

#price .block2 .img{
width: 100%;
}

#price .block2 .img .slick-slide{
margin: 0 8px;
}

#price article{
overflow: hidden;
position: relative;
bottom:0;
left: 0;
z-index: 5;
}

#price .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#price .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.5);
}

#price .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#price .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

#price .red_txt{
width: 90%;
font-size:1.6rem;
font-weight: 900;
line-height: 1.4;
text-align: center;
margin: 0 auto 30px;
}

#price .btn{
padding: 10px;
box-sizing: border-box;
font-size: 1.2rem;
font-weight: 800;
line-height: 1;
text-align: center;
color:#FFF;
background: #a68b28;
}

/*area
----------------------------------------------*/
#area{
position: relative;
margin: 0 0 60px;
}

#area .red_txt{
width: 90%;
font-size: .9rem;
font-weight: 600;
margin: 0 auto 40px;
}

#area article{
overflow: hidden;
position: relative;
bottom:0;
left: 0;
z-index: 5;
}

#area .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#area .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.5);
}

#area .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#area .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}

/*flow
----------------------------------------------*/
#flow{
position: relative;
margin: 0 0 60px;
}

#flow .flow_design02 {
display: flex;
justify-content: center;
align-items: center;
}

#flow .flow_design02 ul {
width: 90%;
margin: auto;
padding: 0;
}

#flow .flow_design02 li {
list-style-type: none;
}

#flow .flow_design02 dd {
margin-left: 0;
font-weight: 500;
}

#flow .flow02 > li {
padding: 20px 10px;
}

#flow .flow02 > li:not(:last-child) {
border-bottom: 2px solid #a68b28;
position: relative;
}

#flow .flow02 > li:not(:last-child)::before,
#flow .flow02 > li:not(:last-child)::after {
content: "";
border: solid transparent;
position: absolute;
top: 100%;
left: 12%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

#flow .flow02 > li:not(:last-child)::before {
border-width: 22px;
border-top-color: #a68b28;
}

#flow .flow02 > li:not(:last-child)::after {
border-width: 10px;
border-top-color: #fff;
}

#flow .flow02 > li dl {
margin: 0;
}

#flow .flow02 > li dl dt {
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 0.5em;
display: flex;
align-items: center;
}

#flow .flow02 > li dl dt .icon02 {
font-size: 1rem;
line-height: 1;
color: #fff;
background:linear-gradient(90deg, #a68b28, #000000);
padding: 10px 10px;
display: inline-block;
margin-right: 0.5em;
}


/*example
----------------------------------------------*/
#example{
position: relative;
margin: 0 0 60px;
}

#example .list {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#example .list li{
width: 49%;
margin-bottom: 2%;
}

#example article{
overflow: hidden;
position: relative;
bottom:0;
left: 0;
z-index: 5;
}

#example .loop_wrap {
display: flex;
width: 100%;
overflow: hidden;
margin: 0 auto 0;
}

#example .loop_wrap div {
flex: 0 0 auto;
white-space: nowrap;
font-size: 4rem;
line-height:1;
overflow: hidden;
color: rgba(206,170,54,.5);
}

#example .loop_wrap div:nth-child(odd) {
animation: txtloop 70s -35s linear infinite;
}
#example .loop_wrap div:nth-child(even) {
animation: txtloop2 70s linear infinite;
}


/*faq
---------------------------------------*/
#faq{
position: relative;
margin: 0 0 60px;
}

.cp_qa04 .cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 1em 0;
color: #ffffff;
}
.cp_qa04 .cp_actab input {
display: none;
}
/* 質問 */
.cp_qa04 .cp_actab label {
position: relative;
display: block;
margin: 0 0.5em 0.5em 2em;
padding: 1em 0 2em 0;
cursor: pointer;
border-radius: 5px;
background: #dc963c;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.cp_qa04 .cp_actab label span {
display: block;
padding: 0 2em 1em 2em;
border-bottom: 1px solid #ffffff;
font-weight: 800;
}
/* --?アイコン */
.cp_qa04 .cp_actab label::before {
position: absolute;
left: -30px;
content: '？';
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
font-size: 2em;
font-weight: bold;
z-index: 99;
border: 3px solid #ffffff;
border-radius: 50%;
background: #dc963c;
}
/* --▼アイコン */
.cp_qa04 .cp_actab label::after {
position: absolute;
right: 10px;
bottom: 10px;
content: '';
width: 15px;
height: 8px;
background: #ffffff;
clip-path: polygon(0 0, 50% 100%, 100% 0);
transition: all 0.5s ease;
}
/* 答え */
.cp_qa04 .cp_actab .cp_actab-content {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
max-height: 0;
margin: 0 0 0.5em 0;
padding: 0 0 0 5em;
transition: max-height 0.5s ease;
color: #ffffff;
}
/* --!アイコン */
.cp_qa04 .cp_actab .cp_actab-content::before {
position: absolute;
left: 50px;
content: '！';
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
font-size: 2em;
font-weight: bold;
z-index: 99;
border: 3px solid #ffffff;
border-radius: 50%;
background: #121212;
}
.cp_qa04 .cp_actab .cp_actab-content p {
margin: 0.5em 0.5em 0.5em 0;
padding: 1em 1em 1em 3em;
border-radius: 0.3em;
background: #121212;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa04 .cp_actab input:checked ~ .cp_actab-content {
max-height: 40em;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa04 .cp_actab input[type=checkbox]:checked + label::after {
transform: scale(1, -1);
}



}