* {margin:0;padding:0;}
body{font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}
.button-container {display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:920px; margin:20px auto 60px; /* コンテナを中央に配置 */width:100%;}
.responsive-button {cursor:pointer;transition:background-color 0.3s;}
.responsive-button a:hover {opacity:0.7;}
.txtSpace {width:90%;margin:0 auto;}
.faqSpace {diaplay:block;}
.faq {position:relative;margin-bottom:30px;}
.faq p {padding:20px;}
.subimg {position:absolute;bottom:0;right:4%;width:30%;}

.Portfolio {position:relative;background:#2660ad;height:950px;overflow:hidden;}
.jirei {border-bottom:1px solid #fff;color:#fff;padding:60px 20px 20px;}
.jirei h3 {text-align:left;}
.jirei span {text-align:right;font-weight:normal;font-size:80%;padding-left:30px;}

.heading-1 span {font-weight:bold;font-size:150%;padding:0 5px;}
.heading-2 span {font-weight:bold;font-size:150%;padding:0 5px;}
.heading-3 span {font-weight:bold;font-size:300%;padding:0 5px;}

.speech-bubble {position:absolute;right:20px;background:#fff;color:#000;padding:25px;border-radius:15px;max-width:350px;width:50%;}
.voiceimg {position:absolute;left:20px;bottom:30px;width:30%;z-index:1000;}
.speech-bubble::after {content:'';position:absolute;bottom:-15px;  /* 吹き出しの三角形の位置 */left:30px;/* 三角形の位置調整 */border-width:15px 8px 0;border-style:solid;border-color:#fff transparent transparent transparent;}


@media screen and (min-width: 480px) {
.grid {max-width:1200px;margin:0px auto;display:flex;display:-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-top:30px;justify-content:flex-start;}
.col-6:nth-child(odd) {padding:0 20px 0 40px;margin-bottom:40px;}
.col-6:nth-child(even) {padding:0 40px 0 20px;margin-bottom:40px;}
.col-6 {width:calc(50% - 60px);}
}
@media screen and (max-width: 479px) {
.grid {max-width:1200px;margin:0px auto;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:20px;}
.col-6 {width:100%;margin-bottom:30px;}
}



/* PCの場合（横2列） */
@media (min-width:480px) {
.button-container {width:100%; /* コンテナの幅を100%に設定 */}
.responsive-button {width:calc(50% - 20px); /* 2列にするための幅設定 */}
.catchcopy {max-width:840px;margin:40px auto;}
.txtSpace h2 {font-size:40px;text-align:center;margin-bottom:15px;}
.txtSpace h3 {font-size:24px;text-align:center;margin:15px 0;}
.txtSpace p {font-size:20px;text-align:left;margin-bottom:30px;}
.txtSpace h2 span {font-weight:bold;font-size:120%;color:#2a9699;}
.txtSpace p span {font-weight:bold;font-size:120%;color:#2a9699;}
.pcMovie {max-width:640px;margin:0 auto;height:450px;display:block;}
.spMovie {display:none;}
.faq p {font-size:20px;line-height:2;}
.faq p span {font-weight:bold;font-size:120%;color:#2a9699;}

.Portfolio p {padding:20px 40px;font-size:20px;color:#fff;line-height:2;}
.price {color:#fff;padding:0 20px;text-align:right;}

.voiceSub {position:relative;padding:20px;height:600px;}
.speech-bubble h3 {color:#2a9699;margin-bottom:10px;line-height:1.5;}
.speech-bubble p {color:#000;padding:0;line-height:1.5;}
}
/* スマホの場合（縦2列） */
@media (max-width:479px) {
.button-container {gap:0px;}
.responsive-button { width:80%; /* スマホでは縦1列 */margin:10px auto 0}
.catchcopy {width:90% !important;margin:20px auto;}
.txtSpace h2 {font-size:24px;text-align:center;margin-bottom:15px;}
.txtSpace h3 {font-size:18px;text-align:center;margin:30px 0;}
.txtSpace p {font-size:16px;text-align:left;margin-bottom:30px;}
.txtSpace h2 span {font-weight:bold;font-size:120%;color:#2660ad;}
.txtSpace p span {font-weight:bold;font-size:100%;color:#2660ad;}
.spMovie {width:80%;margin:30px auto;display:block;}
.pcMovie {display:none;}
.faq p {font-size:16px;line-height:2;}
.faq p span {font-weight:bold;font-size:100%;color:#2660ad;}

.Portfolio p {padding:20px;font-size:16px;color:#fff;line-height:2;}
.price {color:#fff;padding:20px;text-align:right;}

.voiceSub {position:relative;padding:20px 20px 60px;height:350px;}
.speech-bubble h3 {color:#2660ad;margin-bottom:10px;line-height:1.5;}
.speech-bubble p {color:#000;padding:0;line-height:1.5;}
}

@media screen and (max-width:479px){
.pcView{display:none;}
.spView{display:block;}
}
@media screen and (min-width:480px){
.spView{display:none;}
.pcView{display:block;}
}