@charset "UTF-8";
/*
/* -------------------------------------
共通
-----------------------------------------*/
.c-primary-title {
font-size: 36px;
font-weight: bold;
line-height: 1;
margin-bottom: 40px;
/*padding-top: 80px;*/
padding-bottom: 20px;
color: #66259b;
align-items: center; 
display: flex;
justify-content: center;
}

@media screen and (max-width: 767px) {
.c-primary-title {
margin-bottom: 30px;
/*padding-top: 50px;*/
}
}

.c-primary-title::before,
.c-primary-title::after {
content: "";
height: 2px;
/*width: 3em;*/
max-width: 200px; /* 横線の最大の長さ */
width: 33%; /* 横線の長さの割合 */
}

.c-primary-title::before {
margin-right: 1em;
background-image: linear-gradient(to right, transparent, #9451C5);
}

.c-primary-title::after {
margin-left: 1em;
background-image: linear-gradient(to left, transparent, #9451C5); 
}


.c-primary-title span {
display: block;
}

/*.c-primary-title span.c-primary-title_sub {
font-size: 2.4rem;
padding-top: 10px;
}*/

@media (max-width: 1199px) {
.c-primary-title {
font-size: 3.6rem;
}
}

@media (max-width: 767px) {
.c-primary-title {
font-size: 2.4rem;
font-weight: 300;
}
}

.c-primary-txt {
text-align: center;
font-size: 1.8rem;
margin-top: 60px;
}
@media (max-width: 767px) {
.c-primary-txt {
text-align: left;
font-size: 1.6rem;
margin-top: 40px;
}
}

.indent-one {
text-indent: -1em;
padding-left: 1em;
}

.note {
font-size: 14px;
}

/* -------------------------------------
新料金
-----------------------------------------*/
#price .l-inner {
max-width: 1330px;
}

.price_box {
overflow-x: scroll;
margin-bottom: 20px;
}

.price_box__title {
text-align: center;
font-size: 2.8rem;
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.price_box__title {
font-size: 18px;
}
}

#price .table_area {
width: 1280px;
margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
#price .table_area {
width: 800px;
}
}

.price_box .table_area table td {
font-family: 'Oswald';
}

.table_area table {
table-layout: fixed;
font-size: 18px;
margin-inline: auto;
width: 100%;
}
@media screen and (max-width: 767px) {
.table_area table {
font-size: 16px;
width: auto;
}
}

.table_area table tr > th {
text-align: center;
color: #fff;
}

.table_area table th,
.table_area table td {
padding: 12px 10px 12px;
}

.table_area table thead tr {
background-color: #170823;
}

.table_area table tr th {
border-bottom:none;
font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
.table_area table tr th {
font-size: 14px;
font-weight: normal;
}
}

@media screen and (max-width: 767px) {
.table_area table tr th:first-child {
width: 120px;
display: block;
}
}

.table_area table td {
border-bottom: 1px solid #5A436D;
font-size: 20px;
line-height: 1.2;
text-align: center;
}
@media screen and (max-width: 767px) {
.table_area table td {
font-size: 16px;
line-height: 1.2;
}
}

.price_box .table_area table td {
font-weight: bold;
}
@media screen and (max-width: 767px) {
.price_box .table_area table td {
font-weight: normal;
}
}

.price_box .table_area table td.year {
color: #66259b;
font-size:18px;
}
@media screen and (max-width: 767px) {
.price_box .table_area table td.year {
font-size:16px;
}
}



.price_box .table_area table td > span {
color: #aa880b;
font-size: 16px;
font-weight: 400;
}

.price-note {
width:min(90%, 700px);
margin-inline: auto;
}


/* -------------------------------------
仕様
-----------------------------------------*/

.specification_box {
/*overflow-x: scroll;*/
width: 100%;
}

#specification .table_area {
width:720px;
margin-inline: auto;
}
@media screen and (max-width: 767px) {
#specification .table_area {
width: 100%;
margin-inline: inherit;
}
}

#specification .table_area table {

}

@media screen and (max-width: 767px) {
#specification .table_area table {
/*margin-inline: inherit;*/
}
}


/* -------------------------------------
概要
-----------------------------------------*/
.about {
display: flex;
align-items: center;
flex-direction: column;
}

.about_title {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.about_title {
font-size: 18px;
}
}

.about_title span {
color:#ab890b;
font-weight:bold;
}

.about figure {
border:1px solid rgba(102, 37, 155, 0.5);
width:100%;
text-align: center;
padding: 20px 20px 40px;
margin-bottom: 40px;
}
@media (max-width: 767px) {
.about figure {
padding: 10px 20px 10px;
margin-bottom: 20px;
}
}

ul.abou_list {
display: block;
margin: 0 auto;
margin-bottom: 30px;
}
@media (max-width: 768px) {
ul.abou_list {
margin-bottom: 20px;
}
}

ul.abou_list li {
position: relative;
margin-top: 10px;
padding-left: 30px;
line-height: 2;
font-size: 20px;
}
@media screen and (max-width: 767px) {
ul.abou_list li {
font-size: 16px;
line-height: 1.8;
padding-left: 20px;
}
}

ul.abou_list li::before {
position: absolute;
content: url(/gpu/campaign/gpucloud/img/check_ico.png);
display: block;
top: 3%;
left: 0px;
-webkit-transform: translateY(0);
transform: translateY(0);
width: 19px;
height: 16px;
}
@media (max-width: 767px) {
ul.abou_list li::before {
top: 5%;
}
}


/* -------------------------------------
特徴
-----------------------------------------*/
.point {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 80px;
gap: 40px;
font-size: 18px;
}
@media screen and (max-width: 767px) {
.point {
align-items: center;
margin-bottom: 40px;
flex-direction: column;
gap: 20px;
font-size: 16px;
}
}

.point_txt p {
line-height:1.8;
}

.point_txt span {
font-weight:bold;
}

.point_title {
font-size: 36px;
margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
.point_title {
font-size: 24px;
}
}

.point_txt {
width:100%;
}

.point figure {
flex-shrink: 0;
text-align:center;
}
@media (max-width: 1199px) {
.point figure {
flex-shrink: inherit;
}
}

/*.point_area figure img {
flex-shrink: 0;
}*/

.point_number {
margin-bottom: 20px;
color: #66259b;
text-align: center;
font-size: 20px;
letter-spacing: 2px;
line-height: 1;
display: inline-block;
}

.point_number span {
position: relative;
display: inline-block;
padding: 0 8px 4px;
color: #66259b;
font-size: 60px;
font-weight: bold;
border-bottom: #66259b 3px solid;
}

.point_number span::before {
content: "";
display: block;
position: absolute;
bottom: -20px;
right: 20px;
border-bottom: transparent 20px solid;
border-right: #66259b 16px solid;
}

 .point_number span::after {
content: "";
display: block;
position: absolute;
bottom: -12px;
right: 23px;
border-bottom: transparent 15px solid;
border-right: #fff 10px solid;
}

.point2 {
padding-top: 100px;
}
@media (max-width: 767px) {
.point2 {
padding-top: 40px;
}
}

.point3_img {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 10%;
gap: 20px;
margin-top: -40px;
}
@media (max-width: 767px) {
.point3_img {
flex-direction: column;
gap: 20px;
padding: 10px;
padding-left: 0px;
}
}


/* -------------------------------------
FAQ
-----------------------------------------*/
.faq_area {
width: 100%;
margin-top: 60px;
}
@media (max-width: 767px) {
.faq_area {
margin-top: 30px;
}
}

.faq_area dl {
margin-bottom: 10px;
padding: 20px 0;
cursor: pointer;
}
@media (max-width: 767px) {
.faq_area dl {
padding: 10px 0;
line-height: 1.5;
}
}

.faq_area dl dt {
position: relative;
padding:0  0  0 60px;
font-size: 20px;
font-weight: bold;
color:#66259b;
}
@media (max-width: 767px) {
.faq_area dl dt {
padding: 0 0 0 40px;
font-size: 18px;
font-weight:normal;
}
}

.faq_area dl dt::before {
content:"";
position: absolute;
display: inline-block;
background-image:url(/gpu/campaign/gpucloud/img/ico_q.png);
top: 0;
left: 0;
/*transform: translateY(-50%);*/
width: 44px;
height: 44px;
background-size:contain;
background-repeat: no-repeat;
}
@media (max-width: 767px) {
.faq_area dl dt::before {
top: 0;
width: 30px;
height: 30px;
}
}

/*.faq_area dl.is_open dt::after {
transform: translateY(-50%) rotate(225deg);
}
@media (max-width: 767px) {
.faq_area dl.is_open dt::after {
transform: translateY(-50%) rotate(225deg);
}
}

.faq_area dl dt::after {
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(45deg);
right: 0;
width: 20px;
height: 20px;
border-right: #0ad9aa 3px solid;
border-bottom: #0ad9aa 3px solid;
}
@media screen and (max-width: 767px) {
.faq_area dl dt::after {
width: 15px;
height: 15px;
}
}*/

.faq_area dd {
display: none;
position: relative;
margin-top: 20px;
padding-left: 60px;
font-size: 18px;
/*font-weight: bold;*/
}
@media (max-width: 767px) {
.faq_area dd {
padding-left: 40px;
font-size: 16px;
}
}

.faq_area dd::before {
content:"";
position: absolute;
background-image:url(/gpu/campaign/gpucloud/img/ico_a.png);
display: inline-block;
top: 0;
left: 0;
width: 44px;
height: 44px;
background-size:contain;
background-repeat: no-repeat;
}
@media (max-width: 767px) {
.faq_area dd::before {
width: 30px;
height: 30px;
}
}

.faq_area img.bg_gray {
padding:40px 40px;
margin-top: 20px;
border-radius: 10px;
}
@media (max-width: 767px) {
.faq_area img.bg_gray {
padding:20px 10px;
margin-top: 20px;
}
}