@charset "utf-8";

@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('https://fonts.cdnfonts.com/css/itc-avant-garde-gothic-std-book');

/* 共通項目 */
.pc {
display: block;
}
.sp {
display: none;
}
html {
height: auto;

}
section {
position: relative;
}
body {
font-family: "Noto Sans JP", sans-serif;
overflow-x: hidden;
position: relative;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
main {
position: relative;
top: 100px;

}
h2 {
font-size: 24px;
border-bottom: 2px solid #3dc8e6;
font-weight: bold;
display: inline-block;
padding-bottom: 8px;
}
section.full {
margin: 0 calc(50% - 50vw);
width: 100vw;
}
.clear {
clear: both;
}


/* ヘッダー */
header {
position: fixed;
top: 0;
background-color: white;
z-index: 9999;
padding: 0 10px 0 10px;
width: 100%;
}
header div.wrapper {
    max-width: 1200px;
    width: 100%;
}

header .wrapper > a > img{
    margin-top:25px;
}

nav {
float: right;

}
nav, nav ul {
list-style: none;
display: flex;
margin-right: 10px;
}
nav li {
width: auto;
text-align: center;
height: 50px;
line-height: 50px;
margin-right: 2px;
padding: 25px 0 25px 0;
}
nav li::before {
content: "｜";
margin: 0 3px 0 3px;
}
nav li:first-child::before {
content: none;
}
nav li a {
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
nav li a:hover {
color: black;
}

#bt_contact {
overflow: hidden;
background-color: #ec6d88;
color: white;
text-align: center;
height: 70px;
padding: 16px 8px 0 8px;
border-radius: 10px;
margin: 15px 0 0 16px;
}
#bt_contact p {
padding-top: 9px;
font-size: 11px;
}

/* トップビジュアル */
#top {
background-color: #eaf4f9;
height: 500px;
margin: 0 calc(50% - 50vw);
width: 100vw;
padding-top: 10%;

}
#top article {
margin: 0 auto;
display: flex;
justify-content: center;

}
#top article img {
width: 100%;
position: relative;
left: 10%;
top: -10%;
}
#top p:first-child {

font-size: 31px;
}
#top h1 {
font-family: tbudgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
font-size: 52px;
margin: 27px 0 27px 0;
color: #274169;
}
#top p:nth-child(3) {
font-size: 20px;
color: white;
background-color: #3dc8e6;
padding: 2px 8px 10px 8px;
max-width: 440px;
font-weight: bold;
margin-bottom: 20px;
}
#top_content b {
color: #274169;
font-size: 25px;
}
#top span {
font-size: larger;
}


#concept {
text-align: center;
padding-top: 68px;
}
#concept h2 {
font-size: 19px;
line-height: 1.8;
font-weight: 600;
border: none;
}
#concept article {
background-image: url("../img/sales/fukidashi2.jpg");
background-repeat: no-repeat;
background-size: contain;
margin: 0 auto;
max-width: 540px;
max-height: 210px;
margin-top: 36px;
padding: 0 10px 0 10px;
height: auto;

padding-bottom: 80px;
}
.raw_circle {
display: flex;
justify-content: center;
padding-top: 18px;
font-weight: bold;
}
.raw_circle p {
border-radius: 50%;
width: 90px;
height: 90px;
color: white;
padding-top: 5%;
margin: 0 8px 0 8px;
font-size: 15px;
line-height: 1.3;
}
.raw_circle p:nth-child(2) {
padding-top: 7%;
}
.barabara {
font-size: 15px;
color: #274169;
font-weight: bold;
}
.barabara span {
font-size: 17px;

}
.barabara b {
font-size: 18px;
font-weight: 700;
}

.barabara span:first-child {
color: #68aa2d;    
}
.barabara span:nth-child(2) {
color: #db6880;    
}
.barabara span:nth-child(3) {
color: #6e75ae;    
}
.barabara span:nth-child(4) {
color: #e19610;    
}
.raw_circle p:first-child {
background-color: #68aa2d;
}
.raw_circle p:nth-child(2) {
background-color: #db6880;
}
.raw_circle p:nth-child(3) {
background-color: #6e75ae;
}
.raw_circle p:nth-child(4) {
background-color: #e19610;
}
#concept p strong {
font-size: 35px;
font-weight: bold;
color: #274169;
}
.bgc_indigo {
background-color: #274169;
border-radius: 30px;
font-size: 19px;
color: white;
margin: 0 auto;
padding: 2px 12px 6px 12px;
position: relative;
top: 30px;
max-width: 800px;
}
.bgc_indigo small span {
color: yellow;
font-weight: bold;
}


/* お悩み */
#onayami {
padding-top: 57px;
background-color: #274169;
overflow: hidden;
text-align: center;
min-height: 634px;
margin: 0 calc(50% - 50vw);
margin-top: 80px;
}
#onayami h1 {
font-weight: bold;
font-size: 32px;
color: white;
}
#onayami img {
width: 95%;

max-width: 480px;
}
.container {
margin: 0 auto;
max-width: 960px;
font-weight: bold;
font-size: 23px;
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
align-content: center;
}
#circle1 {order: 4;margin-left: 180px;}
#circle2 {order: 5;margin-right: 180px;}
#circle3 {order: 1;margin-top: -30px;}
#circle4 {order: 2;margin-top: -30px;}
#circle5 {order: 3;margin-top: -30px;}

.container div {
background-image: url("../img/sales/distorted_circle.png");
background-repeat: no-repeat;
height: 234px;
width: 230px;
}
.container p {
color: #3dc8e6;
padding-top: 68px;
line-height: 1.5em;
}
#circle2 p {
padding-top: 59px;
}
.container p span {
color: #274169;
}
.container sup {
color: black;
position: relative;
/*top: -1em;
left: -0.9em; */
}

/* できること*/
#provide {
text-align: center;
margin-top: 80px;
}
#provide h2 {
margin-bottom: 50px;
}
.grid_container {
display: grid;
justify-content: space-around;
gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid_container div.grid_item {
background-color: #3dc8e6;
color: white;
border-radius: 10px;
text-align: left;
padding: 0px 10px 15px 9px;
}

.grid_item {
display: flex;
height: 80px;
}
.grid_item img {
padding-top: 5px;
padding-left: 15px;
}
.grid_item p {
padding-top: 15px;
padding-left: 20px;
white-space: nowrap;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.05em;
}
#apo {
padding-top: 28px;
}
.grid_item span {
font-size: 16px;
}

#to_out{
margin-top:50px;
}
#to_out > a{
display:block;
position:relative;
width:700px;
padding:20px 0;
margin:0 auto 30px;
border-radius:10px;
}
#to_out a.call{
background:#e2f1d5;
}
#to_out a.design{
background:#fff5e1;
}
#to_out > a:after{
display:inline-block;
position:absolute;
right:20px;
top:50%;
transform: translateY(-50%);
content: '';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#to_out a.call:after{
border-left: 15px solid #007337;
}
#to_out a.design:after{
border-left: 15px solid #c97d00;
}

#to_out > a img{
width:309px;
margin-top:10px;
}

#to_design {
background-color: #fbf9e9;
border: solid 1.05mm #fdbe00;
border-radius: 10px;
font-size: 34px;
font-weight: bold;
text-align: center;
float: left;
width: 100%;
padding: 28px 0px 28px 40px;
margin-top: 35px;
max-height: 165px;
}
#to_design a {
display: flex;
}
#to_design div {
text-align: left;
}
#to_design p:first-child {
line-height: 1.5em;
}
img#eng_design {
position: relative;
top: -8px;
}
#to_design p span {
color: #cd7d00;
}
#to_design_center {
color: #cd7d00;
font-size: 20px;
margin: 18px 0 0 15px;
text-align: left;
}
#button1 {
padding: 28px 0 0 5px;
}
#provide .small {
font-size: 12px;
text-align: left;
}


/* アプローチ */
section#approach::before {
content: "";
display: inline-block;
background-image: url("../img/sales/italictext.png");
width: 138px;
height: 166px;
background-size: cover;
vertical-align: middle;
position: relative;
top: -110px;
left: 350px;
}

#approach {
background-color: #eaf4f9;
margin-top: 80px;
text-align: center;
padding-top: 75px;
height: 750px;
}

#approach div.wrapper {
max-width: 1000px;
position: relative;
top: -180px;
}
.grid_container2 {
display: grid;
justify-content: center;
gap: 5px;
grid-template-columns: 1fr 1fr 1fr;
margin-top: 55px;

}
.round {
border-radius: 50%;
border: 1px #274169 solid;
background-color: white;
width: 38px;
height: 37px;
color: #274169;
padding: 1px 2px;
float: left;
font-size: 26px;
position: relative;
left: 20px;
font-weight: bold;
}
.side_text {
float: left;
font-size: 20px;
padding: 6px  0 6px 25px;
background-color: #274169;
color: white;
border-radius: 10px;
z-index: 5;
width: 270px;
text-align: left;
font-weight: bold;
}
.grid_container2 p.clear {
padding: 22px 12px 0 18px;
text-align: left;
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.08em;
}
.grid_container2 div:last-child p {
letter-spacing: 0.04em;
}    
.rad20 {
margin: auto;
border-radius: 20px;
width: 90%;
height: auto;
max-width: 960px;
}
#approach p.rad20 {
width: 100%;
background-color: white;
border: solid 2px #274169;
font-size: 24px;
font-weight: bold;
margin-top: 27px;
padding: 20px;
color: #274169;
}
.rad20 span {
font-size: 16px;
font-weight: normal;
position: relative;
top: 8px;
}
#approach p.rad20:last-child {
margin: auto;
background-color: #ec6d88;
border: 3px solid #c7145a;
margin-top: 62px;
font-weight: bold;
font-size: 29px;
color: white;
min-height: 70px;
padding-top: 13px;
max-width: 760px;
}
#approach p.mark_text {
font-size: 18px;
margin : 30px 20px 0 20px;
line-height: 2;
}
.grid_container2 img {
max-width: 300px;
width: 100%;
}
/* 料金 */
#price {
text-align: center;
margin-top: 76px;
}
#initial_cost {
font-size: 26px;
margin: 52px 0 44px 0;
}
#initial_cost span {
color: #3dc8e6;
font-family: "DIN 2014" , "Noto Sans JP", sans-serif ;
font-size: 40px;
font-weight: bold;
position: relative;
top: 3px;
}
#initial_cost span .yen {
font-size: 22px;
top: -3px;
}
#initial_cost small {
font-size: 22px;
position: relative;
top: -2px;
}
#initial_cost small span {
position: relative;
top: -2px;
font-size: 14px;
}

#initial_cost, #initial_cost span .yen, 
#initial_cost small, #initial_cost small span {
font-weight: bold;
}

.grid_price_plan h3, .single_line h3 {
color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 30px;
font-weight: bold;
padding-bottom: 4px;
}
.small_text {
font-size: 20px;
font-weight: 600;
}
.small_text span {
font-size: 15px;
}
.large_text {
font-family: "AvantGarde Medium" , "Noto Sans JP", sans-serif ;
font-size: 70px;
font-weight: bold;
}
.large_text span {
font-size: 30px;
font-weight: bold;
padding-left: 8px;
}
#price strong {
font-weight: bold;
}

.grid_price_plan h3 span {
font-size: 40px;

}
.medium_text {
font-size: 50px;
color: #666;
font-weight: bold;
}
.medium_text span {
font-size: 25px;
}
.grid_price_plan .ryoukin p:last-child {
padding-top: 15px;
font-weight: 500;
font-size: 27px;
}
.grid_price_plan {
display: flex;
justify-content: space-around;
}
.grid_price_plan div {
color: #666;
width: 80%;
margin: 0 auto;
}
.medium_num {
font-size: 46px;
}
.grid_price_plan div div {
padding: 23px 0 23px 0;
}

/* 料金 色管理 */
#plan_s h3 {
background-color: #3dc8e6;
}
#plan_m h3 {
background-color: #274169;
}
#plan_l h3 {
background-color: #83345e;
}
#plan_s, #plan_m, #plan_l {
border-radius: 10px;
max-width: 300px;

}
#plan_m {
margin: 0 25px 0 25px;
}
#plan_s {
border: #3dc8e6 solid 3px;
}
#plan_m {
border: #274169 solid 3px;
}
#plan_l {
border: #83345e solid 3px;
}
#plan_s .list_count, #plan_s .large_text {
color: #3dc8e6;
}
#plan_m .list_count, #plan_m .large_text {
color: #274169;
}
#plan_l .list_count, #plan_l .large_text {
color: #83345e;
}
#plan_s .ryoukin {
border-top: #3dc8e6 solid 1px;
border-bottom: #3dc8e6 solid 1px;
}
#plan_m .ryoukin {
border-top: #274169 solid 1px;
border-bottom: #274169 solid 1px;
}
#plan_l .ryoukin {
border-top: #83345e solid 1px;
border-bottom: #83345e solid 1px;
}

#price div.small {
padding: 24px 0 33px 0;
text-align: left;
font-size: 12px;
line-height: 1.5;
}


/* 料金 横並びプラン */
.single_line b span {
font-size: 24px;
}    
.single_line {
color: #666;
display: flex;
justify-content: space-between;
border: #ec6d88 solid 3px;
border-radius: 10px;
white-space: nowrap;
max-height: 130px;
}
.single_line:nth-child(2) {
max-width: 180px;
}

.single_line h3 {
background-color: #ec6d88;
border-top-right-radius: 0;/*右上角丸リセット*/
border-bottom-left-radius: 6px;
padding: 47px 20px 47px 20px;

}
.single_line div {
width: 100%;
}
#sample_left {
max-width: 180px;
padding-top: 15px;
}
.single_line div.ryoukin {
border-left: #ec6d88 2px solid;
border-right: #ec6d88 2px solid;
margin: 15px 0 15px 0;
padding: 0 30px 0 30px;
}
.single_line .list_count, .single_line .large_text {
color: #ec6d88;
}
.single_line .medium_text {
position: relative;
top: -5px;
}
.single_line .keiyakukikan {
line-height: 1.5;

}
.single_line #sample_right {
max-width: 220px;
padding: 12px 0 15px 0 ;
}


/* 料金　オプション */
article#option::before {
content: "";
display: inline-block;
background-image: url("../img/sales/otoku.png");
width: 220px;
height: 87px;
position: relative;
top: -80px;
left: 338px;
}
#option {
background-color: #eaf4f9;
margin: 0 auto;
max-width: 700px;
height: 420px;
margin-top: 80px;
margin-bottom: 35px;
padding: 40px 70px 40px 70px;
border-radius: 30px;
}    
#option div.wrapper {
position: relative;
top: -87px;
}
#option h3 {
font-size: 21px;
font-weight: bold;
}
#side_small_text {
text-align: right;
font-size: 12px;
position: relative;
top: -13px;
border-bottom: 1px #274169 solid;
padding-bottom: 20px;
}
.option_content {
display: flex;
justify-content: space-between;
white-space: nowrap;
font-size: 21px;
margin-bottom: 25px;
}
.option_content p {
text-align: right;
color: #274169;
font-weight: 900;
font-family: "DIN 2014" , "Noto Sans JP", sans-serif ;
position: relative;
font-size: 25px;
letter-spacing: 0.05em;
top: 1px;
}
.option_content p span {
font-size: 16px;
}
.dot {
background-image: url("../img/sales/dot.jpg");
width: 70%;
background-repeat: repeat-x;
background-position-y: 5px;
margin: 0 10px 0 10px;
}
#dot2, #dot5 {
margin-right: 5px;
}
#dot3, #dot6 {
position: relative;
left: 4px;
}

/* サービス内容と営業の流れ */

#flow {
margin-top: 80px;
text-align: center;
padding-top: 72px;
background-color: #eaf4f9;
}
#flow_caption {
margin: auto;
max-width: 960px;
text-align: right;
font-size: 14px;
padding-top: 30px;
}
#flow article {
padding-top: 50px;
max-width: 960px;
margin: 0 auto;
}
.flow_box {
display: flex;
justify-content: left;
padding-right: 10px;
}
.flow_circle p {
color: white;
border-radius: 50%;
width: 150px;
height: 150px;
font-size: 21px;
padding-top: 32%;
font-weight: bold;
line-height: 1.4;
margin: 0 20px 0 20px;
margin-top: 2vh;
}
.flow_box:nth-child(3) .flow_circle p, 
.flow_box:nth-child(4) .flow_circle p, 
.flow_box:nth-child(5) .flow_circle p {
padding-top: 24%;
}
/*.flow_circle img {
   position: relative;
   top: -15%;
   }*/
.flow_circle::after {
content: "";
background-image: url(../img/sales/sankaku_u.png);
height: 10px;
width: 16px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
position: relative;
top: -23px;
}
.flow_box:last-child .flow_circle::after {
display: none;
}
.flow_text {
text-align: left;
padding-right: 20px;
padding-left: 5px;
padding-bottom: 20px;
}
.flow_text p {
line-height: 1.5;
}
.flow_subtext {
color: #274169;
font-size: 18px;
font-weight: 500;
}
.flow_text b {
font-size: 25px;
line-height: 2;
}
.flow_box:nth-child(3) .flow_text b {
font-size: 24px;
}
.flow_box:nth-child(odd) {
background-color: white;
}
.flow_box:nth-child(odd) b {
color: #3dc8e6;
}
.flow_box:nth-child(even) {
background-color: #e5e5e5;
}
.flow_box:nth-child(even) b {
color: #274169;
}
.flow_box:nth-child(odd) .flow_circle p {
background-color: #3dc8e6;
}
.flow_box:nth-child(even) .flow_circle p {
background-color: #274169;
}

.flow_box:first-child .flow_text,
.flow_box:nth-child(7) .flow_text, 
.flow_box:nth-child(8) .flow_text {
padding-top: 70px;
}
.flow_box:nth-child(2) .flow_text {
padding-top: 35px;
}

.flow_box:nth-child(3) .flow_text,
.flow_box:nth-child(4) .flow_text,
.flow_box:nth-child(6) .flow_text {
padding-top: 43px;
}

.flow_box:nth-child(5) .flow_text {
padding-top: 10px;
}

.flow_box:nth-child(2) .flow_text p {
padding-top: 5px;
}

.flow_box:nth-child(5) div.flow_circle {
padding-top: 15px;
padding-bottom: 15px;
}
.flow_textlist {
padding-top: 10px;
}

#flow::after {
content: "";
background-image: url("../img/sales/repeat.png");
display: inline-block;
width: 244px;
height: 123px;
background-size: cover;
position: relative;
top: -889px;
left: 345px;
}

/* イメージ */
#sales_image {
margin: 87px 0 0px 0;    
text-align: center;
}
#sales_image h2 {
margin-bottom: 43px;
}
#sales_image b {
line-height: 1.8;
font-weight: 900;
font-size: 22px;
}
#sales_image b span {
color: #3dc8e6;
}
#sales_image figcaption {
display: flex;
color: white;
font-weight: bold;
font-size: 16px;
justify-content: space-between;
margin-top: 10px;
}
#sales_image figcaption p {
border-radius: 5px;
padding: 6px 15px 6px 15px;
width: 290px;
text-align: center;
}
#sales_image figcaption p:first-child {
background-color: #3dc8e6;
position: relative;
left: 88px;
}
#sales_image figcaption p:last-child {
background-color: #db5351;
}
#sales_image img {
width: 100%;
}


/* ご案内 */
#annai {
text-align: center;
background-color: #eaf4f9;
margin-top: 88px;
}
#annai .article {
max-width: 960px;
margin: auto;
display: flex;
justify-content: left;
padding-top: 80px;
padding-bottom: 80px;

}
#annai div {
text-align: left;
padding-left: 25px;
}
#annai div h2 {
border-bottom: black solid 1px;
padding-bottom: 23px;
}
#annai div p {
padding-top: 25px;
font-size: 16px;
line-height: 1.5;
}
#annai div p:last-child {
padding-top: 35px;
font-size: 18px;
}
#annai div p span {
color: #274169;
font-weight: bold;
}
#annai img {
max-height: 270px;
}


/* 問い合わせ/フォーム */
#hurry img {
position: relative;
top: 6px;
}

#contact {
text-align: center;
margin-top: 80px;
}
#contact h2 {
margin-bottom: 47px;
}
#contact h3 {
margin-bottom: 30px;
line-height: 2;
padding: 0 15px 0 15px ;
}
#hurry {
border-radius: 15px;
background-color: #274169;
color: white;
max-width: 290px;
margin: 0 auto;
font-size: 16px;
padding: 0px 20px 4px 20px;
font-weight: bold;
}
form div {
background-color: #eaf4f9;
padding: 63px 63px 77px 63px;
margin-top: 35px;
margin-bottom: 45px;
text-align: left;
overflow: hidden;
}

input {
background-color: white;
font-size: 15px;
width: 70vw;
max-width: 370px;
height: 53px;
margin-bottom: 38px;
margin-top: 13px;
padding-left: 15px;
}
input[type="checkbox"] {
height: auto;
width: auto;
margin-top: 2px;
}
input[type="email"] {
max-width: 500px;
}    
label {
font-size: 15px;
}
textarea {
background-color: white;
width: 70vw;
height: 260px;
max-width: 695px;
padding: 15px 0 0 15px;
}
#contact sup {
color: red;
position: relative;
top: -0.4em; 
}

label {
font-weight: bold;
}
form div p:nth-child(2) {
padding-top: 10px;
color: red;
margin-bottom: 38px;
}
.to_privacy {
border-bottom: solid black 1px;
}
.privacycheck input {
position: relative;
top: 1.1em;
}

.kakuninbtn {
border-radius: 48.5px;
background-color: #3dc8e6;
color: white;
font-weight: bold;
background-image: url("../img/sales/yajirushi_l.png");
background-repeat: no-repeat;
background-position: 95%;
font-size: 22px;
height: 97px;
max-width: 402px;

}


footer small {
font-family: a-otf-futo-go-b101-pr6n, kozuka-gothic-pr6n , 	Meiryo UI , sans-serif;
font-style: normal;
font-weight: 500;
color: white;

}
footer {
background-color: #274169;
text-align: center;
height: 30px;
position: absolute;
bottom: -150px;
padding-top: 4px;
width: 100%;

}
.f2 {
position: fixed;
bottom: 0px;
}
/* フォーム確認　エラー */
#formWrap {
padding: 150px 15px 169px 15px;
}
#formWrap h4 {
padding: 30px;
}
#formWrap input.error_return {
background-color: #274169;
color: white;
border-radius: 30px;
font-weight: bold;
padding: 12px;
}
#formWrap p.error_messe {
color: red;
}
#formWrap p.error_messe span {
color: black;
}

/* フォーム送信後画面 */
.thanks {
position: relative;
top: 100px;
padding: 20px;
}
.thanks h4 {
font-weight: bold;
font-size: x-large;
}
.thanks p {
line-height: 4;
padding-left: 10px;
}
.thanks a {
background-color: #274169;
color: white;
border-radius: 30px;
font-weight: bold;
padding: 12px;
}
form table.formTable {
margin: 0 auto;
margin-top: 100px;
}
.formTable th, .formTable td {
padding: 10px;
height: 40px;
}
.formTable th {
background-color: #274169;
color: white;
border-bottom: white 1px solid;
}
.formTable tr {
border: #274169 1px solid;
}
.formTable td {
max-width: 300px;
overflow-wrap: break-word;
}
.formTable tr:nth-child(6) th {
border-bottom: none;
}
input.sousinbtn {
background-color: #3dc8e6;
color: white;
font-weight: bold;
margin-top: 50px;
border-radius: 40px;
width: 150px;
}
input.modorubtn {
border: black 1px solid;
margin-top: 50px;
border-radius: 40px;
width: 150px;
margin-left: 10px;
}
input.modorubtn, input.sousinbtn {
padding-left: 0;
}

@media screen and (max-width:1040px) {
#top_content p, #top p:last-child,
#top h1 {
padding-left: 18px;
}
#top_content {
max-width: none;

}

}    
@media screen and (max-width:978px) {
#approach {
height: auto;
}
/* アプローチ */
.side_text {
font-size: 2vw;
width: 27vw;
position: relative;
left: -10px;
z-index: 9;
}
.round {
left: 10px;
z-index: 10;
font-size: 20px;
width: 28px;
height: 28px;
}
}    
@media screen and (max-width:960px) {
main {
overflow: hidden;
}
header .wrapper > a > img{
margin-top:20px;
}
#logo {
width:280px;
/*
   height: 88px;
   width: 40%;
 */
}
#flow::after {
width: 24vw;
height: 12vw;
left: 35vw;
}

}
@media screen and (min-width:692px) and ( max-width:1000px) {
#sales_image {
padding: 0 15px 0 15px;
}
#annai div {
padding-right: 10px;
}
}    
@media screen and (min-width:891px) and ( max-width:935px) {
#button1 {
padding: 0 15px;
}
}    

@media screen and (min-width:567px) and ( max-width:726px) {
#flow::after {
top: -945px;
}
}    
@media screen and (min-width:480px) and ( max-width:566px) {
#flow::after {
top: -972px;
}
.flow_text b, .flow_box:nth-child(3) .flow_text b {
font-size: 20px;
}
}    
@media screen and (max-width:890px) {
#top {
overflow: hidden;
}
#to_design p:nth-child(2) {
text-align: right;
width: 55%;
margin-top: 10px;
}
#button1 {
padding-top: 0px;
}
#to_design {
padding-top: 10px;
padding-left: 5%;
font-size: 28px;
max-height: 145px;
}
#eng_design {
height: 28px;
}
.none890 {
display: none;
}    
#button1 {
padding: 0;
}

/* 料金 */
article#option::before {
left: 30vw;
}

/* アプローチ */
section#approach::before {
left: 37vw;
}
}

@media screen and (max-width:850px) {
main {
top: 70px;
}
/* ヘッダー */
nav li {
display: none;
}
#logo {
/*
   min-width: 230px;
   height: 60px;
   width: auto;
 */
}
#bt_contact {
height: 50px;
margin: 8px 0 0 5px;
}
#bt_contact p {
padding-top: 0;
}
#bt_contact img {
position: relative;
top: -7px;
}

/* トップビジュアル */
#top article {
padding: 0 5px 0 5px;
}

#top p:first-child {
font-size: 3vw;
}
#top h1 {
font-size: 4vw;
white-space: nowrap;
margin: 10px 0 10px 0;
}
#top p:nth-child(3) {
font-size: 1.8vw;
white-space: nowrap;
margin-left: 8px;
margin-bottom: 10px;
}
#top b {
font-size: 2.8vw;
padding-left: 9%;
}

#top_content {
background-position: 100% 10%;
}
#top {
height: 50vw;
min-height: 240px;
}
#top article img {
left: 2%;
}

/* コンセプト */
#concept h1.pc {
display: none;
}
#concept h1.sp {
display: block;
padding-top: 20px;
text-align: center;
}
#concept small {
line-height: 2em;
}

/* お悩み */
div.container {
justify-content: space-around;
}
div#circle1 {margin: 0;position: relative; left: 40px;}
div#circle2 {margin: 0;position: relative; right: 40px;}
div#circle3 {margin: 0;}
div#circle4 {margin: 0;}
div#circle5 {margin: 0;}

/* できること */
.grid_item p {
font-size: 18px;
}
#to_design {
font-size: 20px;
padding: 20px;
}
#to_design a {
justify-content: space-around;
}
#eng_design {
height: 21px;
}
img#eng_design {
top: -6px;
}
#to_design_center {
margin: 0;
font-size: 15px;
padding-top: 9px;
}
#button1 {
margin-top: 11px;
}
/* 料金 */
#price h3 {
font-size: 4.2vw;
}
.grid_price_plan h3 span {
font-size: 5vw;
}
.large_text {
font-size: 7vw;
}
.medium_text {
font-size: 4.5vw;
}
.medium_num {
font-size: 4vw;
}
#plan_m {
margin: 0 12px 0 12px;
}
.grid_price_plan {
padding: 0 10px 0 10px;
}

}

@media screen and (max-width:691px) {
main {
top: 72px;
}

/* お悩み */
div#circle1 {margin: 0;position: relative; left: 0px;}
div#circle2 {margin: 0;position: relative; right: 0px;}
div#circle1 {order: 1;}
div#circle2 {order: 2;}
div#circle3 {order: 3;}
div#circle4 {order: 4;}
div#circle5 {order: 5;}
.container {
margin-bottom: 45px;
}

/* できること */
.grid_container {
padding: 0 10px 0 10px;
gap: 10px;
grid-template-columns: 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr;
}
.grid_container p {
padding-right: 10px;
}

#eng_design {
width: 25vw;
height: 4vw;
}
.tab {
display: none;
}
#provide .small {
padding-left: 8px;
}


/* アプローチ */
section#approach::before {
width: 90px;
height: 108px;
}
section#approach h2 {
font-size: 20px;
padding-top: 25px;
}
section#approach {
max-height: 1350px;
}    
.grid_container2 {
grid-template-columns: none;
}
.grid_container2 p.clear {
width: 99%;
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
#approach p.rad20 {
font-size: 3.7vw;
min-height: 120px;
line-height: 1.5;
}
.rad20 span {
font-size: 1.5vw;
position: relative;
top: -1px;
}
#approach p.mark_text {
margin: 30px 30px 30px 20px;
}
#approach p.rad20:last-child {
width: 80%;
font-size: 20px;
}
.side_text {
width: 88%;
font-size: 3vw;
}

/* 料金 */
.grid_price_plan .ryoukin p:last-child {
font-size: 4vw;
}

/* イメージ */
#sales_image figcaption p:first-child {
left: -7px;
}
#sales_image figcaption {
font-size: 3.3vw;
line-height: 1.7;
}
#sales_image figcaption p {
margin: 0 3px 0 3px;
}
#sales_image .pc {
display: none;
}
/* 案内 */
#annai .article {
display: block;
width: 90%;
overflow: hidden;
}
#annai .article div {
margin-top: 20px;
}

}    

/* お悩み用 */
@media screen and (min-width:478px) and ( max-width:689px) {
div#circle1 {order: 1;margin: 0;}
div#circle2 {order: 2;margin: 0;}
div#circle3 {order: 3;margin: 0;}
div#circle4 {order: 4;margin: 0;}
div#circle5 {order: 5;margin: 0;}
.container {
flex-wrap: wrap;
}

}

@media screen and (max-width:500px) {
#logo {
/*
   width: 78%;
   min-width: 150px;
 */
}
#bt_contact {
width: 55px;
}
#bt_contact p {
display: none;
}
#bt_contact img {
top: 0;
}

/* できること */
.grid_item p {
font-size: 3.8vw;
padding-left: 12px;
padding-top: 10px;
letter-spacing: 1.2;
}
#apo {
padding-top: 20px;
}
.grid_item span {
font-size: 1.5vw;
}
.grid_item {
height: 15vw;
}
.grid_item img {
height: auto;
width: 9vw;
padding-left: 0;
top: -4px;
}
.grid_container {
grid-template-columns: 50% 50%;
}
.grid_container .grid_item:nth-child(4) p {
font-size: 3.1vw;
line-height: 1.4;
}
#provide h2 {
margin-bottom: 15px;
}
#provide .small {
font-size: 3.4vw;
}
#to_design {
padding: 10px;
}
img#eng_design {
top: -6px;
}
#to_design p:nth-child(2) {
font-size: 3.2vw;
margin-top: 5px;
}
#button1 {
width: 20px;
height: 20px;
margin-top: 0.5vw;
}

/* 料金 */

}    
/* スマホ用 */
@media screen and (max-width:479px) {
.pc{
display: none;
}
.sp {
display: block;
}
header {
overflow: hidden;
padding-bottom: 10px;
}
h2 {
font-size: 5vw;
}
section {
padding: 0 8px 0 8px;
}
/* header */
nav, nav ul {
margin-right: 0;
}
/* トップビジュアル */
#top.full {
padding-left: 0;
padding-right: 0;
}
#top p:first-child {
font-size: 5.5vw;
padding-left: 0;
text-align: center;
}
#top p:nth-child(3) {
padding: 0 10px 0 10px;
margin: 0 auto;
text-align: center;
width: 75%;
font-size: 3vw;
}
#top {
min-height: 460px;
padding-top: 8%;
}
#top p:nth-child(3) {
margin-bottom: 1%;
padding-bottom: 4px;
}
#top b {
margin: 0 auto;
padding: 0;position: relative;
right: 10px;
display: block;
text-align: center;
font-size: 4.5vw;
}
#top h1 {
font-size: 8vw;
text-align: center;
padding: 0;
margin: 15px 0 15px 0;
}
#top article img {
left: 0;
padding-top: 20px;
max-height: 240px;
width: auto;
}
#top article {
display: block;
}
#top article div:nth-child(2) {
text-align: center;
max-height: 240px;
width: auto;
}
/* コンセプト */
#concept {
padding-top: 35px;
}
#concept h2 {
padding: 0 10px 0 10px;
}
.raw_circle p {
width: 70px;
height: 70px;
margin: 0 2px 0 2px;
}
.raw_circle {
max-height: 90px;
padding-top: 7px;
}
#concept h2 {
font-size: 4vw!important;
}
#concept p {
font-size: 3.3vw;
}
.barabara span, .barabara b {
font-size: 4vw;
}
.raw_circle p {
font-size: 2.8vw!important;
}
#concept p strong {
font-size: 6vw;
}
#concept small {
font-size: 3.3vw;
line-height: 1.5;
}
.raw_circle p {
width: 80px;
height: 78px;
margin: 0 6px 0 6px;
}
.bgc_indigo {
line-height: 0.8;
padding-bottom: 10px;
}
/* お悩み */
#onayami {
min-height: 500px;
padding-top: 20px;
}
#onayami h1 {
font-size: 4.5vw;
}
#onayami img {
width: 70%;
margin-top: 10px;
}
.container p {
font-size: 12px;
}
.container div {
width: 153px;
height: 156px;
background-size: cover;
}
.container p {
padding-top: 45px;
}
#circle2 p {
padding-top: 40px;
}
#circle4 p {
padding-top: 45px;
} 
div.container {
flex-wrap: wrap;
}
/* できること */
#provide {
margin-top: 55px;
}
#to_design {
font-size: 3vw;
}
#eng_design {
width: 20vw;
height: 3vw;
top: 0;
}
#to_design p:first-child {
line-height: 2em;
padding-top: 0;
}
#to_design_center {
width: unset;
text-align: left;
font-size: 2.4vw;
line-height: 1.5!important;
margin: 10px 0 0 10px;
}
#button1 {
margin-top: 3.5vw;    
}
#to_design a {
justify-content: center;
}
/* アプローチ */
#approach {
margin-top: 80px;
}
section#approach h2 {
position: relative;
font-size: 4vw;
padding-top: 75px;
}
section#approach::before {
width: 75px;
height: 90px;
top: -120px;
}
#approach p.mark_text {
font-size: 3.7vw;
}
#approach p.rad20:last-child {
font-size: 16px;
margin-top: 20px;
}
section#approach {
max-height: 940px;
}
.rad20 span {
font-size: 3vw;
}
.grid_container2 {
margin-top: 25px;
justify-content: unset;
}
.grid_container2 p.clear {
font-size: 3.6vw;
}
#approach p.rad20 {
max-width: 310px;
min-height: 70px;
}
#approach p.rad20:last-child {
font-size: 4.5vw;
}
#approach p.rad20:last-child img {
height: 24px;
}

.grid_container2 img {
width: 100%;
height: auto;
}

.grid_container2 p.clear {
width: 88%!important;
margin: 0 auto;
max-width: unset;
}
.side_text {
max-height: 30px;
font-size: 4vw;
}
/* 料金 */
#price div.small {
padding-left: 20px;
padding-top: 12px;
padding-bottom: 12px;
font-size: 3.4vw;
}
#initial_cost {
font-size: 16px;
}
#initial_cost span {
font-size: 28px;
}
#initial_cost span .yen {
font-size: 16px;
}
#initial_cost small {
position: relative;
left: 37px;
}
#about_design {
width: 80%;
}
/* 料金 リセット*/
.grid_price_plan {
display: block;
}
#plan_m {
margin: 0;
}
.grid_price_plan div {
margin: 0;
width: 100%;
}

.grid_price_plan div div {
padding: 0;
}
.single_line div.ryoukin {
padding: unset;
}
.grid_price_plan .ryoukin p:last-child {
padding-top: 8px;
}
.single_line .medium_text span {
font-size: 3vw;
}
#to_out > a{
margin:0 10px 20px;
width:auto;
font-size:12px;
}
#to_out > a img{
width:60%;
}

/* 料金横並び */
#plan_s, #plan_m, #plan_l {
display: flex;
justify-content: space-around;
border-radius: 10px;
max-height: 130px;
max-width: 480px;
}
.single_line {
justify-content: space-between;
margin: 0 10px 0 10px;

}
.grid_price_plan h3 {
border-top-right-radius: 0;
border-bottom-left-radius: 6px;
white-space: nowrap;
}
#plan_m {
margin: 15px 0 15px 0;
}
.single_line h3 {
padding: unset;
}
.grid_price_plan h3, .single_line h3 {
text-orientation: upright;
white-space: normal;
padding: 5px;
}
#price h3 {
font-size: 15px;
max-width: 30px;
}
.grid_price_plan h3 {
padding-top: 15px;
}
#price article div {
margin-top: 15px;
}
.grid_price_plan .list_count {
padding-top: 5px;
}
.small_text {
font-size: 4vw;
padding-top: 3px;
}
.small_text span {
font-size: 3vw;
}
.keiyakukikan {
position: relative;
line-height: 1.8;
}
.single_line .keiyakukikan span {
position: relative;
top: 8px;
}
.medium_num {
font-size: 22px;
}
.large_text {
font-size: 8vw;
padding-top: 10px;
}
.large_text span {
font-size: 5vw;
padding-left: 4px;
}
.medium_text span {
font-size: 3vw;
}
.single_line b span {
font-size: 4vw;
}
.single_line .medium_text {
padding-top: 20px;
}
.single_line div.ryoukin {
padding-top: 7px;
}
#plan_s .ryoukin, #plan_m .ryoukin,
#plan_l .ryoukin, .single_line .ryoukin {
margin-bottom: 15px;
padding: 0 8px 0 8px;
}
#plan_s .ryoukin {
border-top: none;
border-right: #3dc8e6 solid 2px;
border-bottom: none;
border-left: #3dc8e6 solid 2px;
}
#plan_m .ryoukin {
border-top: none;
border-right: #274169 solid 2px;
border-bottom: none;
border-left: #274169 solid 2px;
}
#plan_l .ryoukin {
border-top: none;
border-right: #83345e solid 2px;
border-bottom: none;
border-left: #83345e solid 2px;
}
article#option::before {
width: 147px;
height: 58px;
background-size: cover;
left: 27vw;
top: -90px;
}
div.dot {
margin-top: 0!important;
}
#option {
padding: 40px 20px 40px 20px;
height: 400px;
margin: 90px 10px 25px 10px;
}
#option h3 {
max-width: none;
}
.option_content {
font-size: 16px;
}
.option_content p {
font-size: 18px;
top: 5px;
}

/* サービス内容と営業の流れ */
div.flow_circle {
position: relative;
left: -10px;
padding-left: 10px;
}
#flow {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
margin-top: 35px;
padding-top: 35px;
}    
#flow article {
padding-top: 25px;
}
.flow_circle p {
width: 18vw;
height: 18vw;
font-size: 3.5vw;
padding-top: 6.5vw;
}
.flow_box:nth-child(3) .flow_circle p, 
.flow_box:nth-child(4) .flow_circle p {
padding-top: 15%;
font-size: 3vw;
}
.flow_box:nth-child(5) .flow_circle p {
padding-top: 18%;
font-size: 3vw;
}
.flow_box:nth-child(7) .flow_circle p {
padding: 15px 8px 0px 8px;
}
.flow_text {
width: 100%;
position: relative;
left: -10px;
padding: unset!important;

}
.flow_text b {
font-size: 4.5vw!important;
}
.flow_text p {
font-size: 3vw;
}
.flow_circle::after {
width: 10px;
height: 6px;
}
.flow_box:nth-child(5) .flow_circle img {
top: -12%;
}
.flow_box:first-child .flow_text {
position: relative;
top: 5vw;
}
div.flow_box:first-child,
div.flow_box:nth-child(2) {
padding: 20px 0 20px 0;
}

div.flow_box:nth-child(6),
div.flow_box:nth-child(7),
div.flow_box:nth-child(8) {
padding: 10px 0 10px 0;
}
div.flow_box:nth-child(2) b {
line-height: 1.5;
}
.flow_box:nth-child(2) .flow_text p {
padding-top: 5px;
font-size: 3.5vw;
}
.flow_subtext {
    font-size: 3.5vw!important;
}
div.flow_box:nth-child(2) .flow_circle p {
margin-top: 2.2vh;
}
.flow_box:nth-child(4) {
padding: 20px 0 25px 0;
}
.flow_box:nth-child(6) .flow_text {
position: relative;
top: 5vw;
}
.flow_box:nth-child(5) div.flow_circle {
padding-top: 19vw;
}
div.flow_box:nth-child(3) {
padding: 10px 0 10px 0;
}
.flow_box:nth-child(7) .flow_text, 
.flow_box:nth-child(8) .flow_text {
position: relative;
top: 4.5vw;
}
#flow_caption {
font-size: 3.4vw;
padding-bottom: 30px;
}
#flow::after {
display: none;
}
.flow_text img {
width: 34vw;
height: auto;
position: relative;
left: 50%;
}
.flow_box:nth-child(5) .flow_text {
position: relative;
top: -33px;
}
/* 案内 */
#annai {
margin-top: 40px;
}
#annai img {
display: none;
display: block;
width: 100%;
}
#annai div {
padding-left: 0;
}
#annai div p {
padding-top: 15px;
font-size: 13px;
}
#annai div p:last-child {
padding-top: 15px;
font-size: 13px;
}
#annai .article {
padding-bottom: 30px;
padding-top: 30px;
}
/* イメージ */
#sales_image {
padding: 0 20px 0 20px;
margin: 30px 0 0px 0;
}
#sales_image figcaption {
line-height: 1.5;
}

#sales_image div {
margin-bottom: 15px;
}
#sales_image div b {
font-size: 3.3vw;
}
#sales_image img {
margin-top: 10px;
}
#sales_image h2 {
margin-bottom: 25px;
}
/* 案内 */
#annai div h2 {
font-size: 4.8vw;
white-space: nowrap;
}
/* フォーム */
.kakuninbtn {
font-size: 15px;
height: 40px;
max-width: 402px;
}
a.to_privacy {
line-height: 2;
}
#contact {
padding-left: 0;
padding-right: 0;
margin-top: 25px;
}
#contact h2 {
margin-bottom: 15px;
}
#contact h3 {
padding: 0 15px 0 15px;
font-size: 3.5vw;
}
#hurry {
font-size: 14px;
padding-top: 7px;
padding-bottom: 7px;
}
form div {
padding: 20px;
padding-bottom: 40px;
}
form textarea, form div input {
width: 100%;
}
section {
max-width: 479px;
}

}
@media screen and (max-width:400px) {
/* コンセプト */
.raw_circle {
justify-content: space-between;
}    
.raw_circle p:nth-child(2) {
padding-top: 8%;
}
#concept article {
width: 100%;
margin-top: 10px;
padding-bottom: 50px;
}
.raw_circle p {
padding-top: 7%;
width: 70px;
height: 68px;
margin: 0 4px 0 4px;
}

/* お悩み */

.container {
font-size: 14px;
}
.container div {
width: 133px;
height: 136px;
background-size: cover;
}
.container p {
padding-top: 40px;
}
#circle4 p {
padding-top: 45px;
} 
div.container {
flex-wrap: wrap;
}
/* できること */
#button1 {
position: relative;
left: 7px;
}
.grid_item p {
letter-spacing: 0;
}
/* アプローチ */
#approach p.rad20 {
min-height: 65px;
padding: 10px;
}
.grid_container2 {
margin-top: 25px;
}
#approach p.rad20:last-child {
min-height: 60px;
}
section#approach {
max-height: 800px;
}

/* 料金 */
#price {
margin-top: 25px;
}
#initial_cost {
margin: 25px 0 25px 0;
}
.medium_text span {
font-size: 13px;
}


/* フォーム */
.thanks h4 {
font-size: 4vw;
text-align: center;
}
.thanks p {
font-size: 3vw;
line-height: 3;
padding-top: 20px;
text-align: center;
padding-left: 0;
}

}
@media screen and (max-width:350px) {
/* header */
#logo {
height: 50px;
}
#bt_contact {
height: 40px;
}
#bt_contact img {
top: -5px;
}
main {
top: 55px;
}
/* メインビジュアル */
#top article img {
max-height: 200px;
}
#top {
min-height: 400px;
}
/* コンセプト */
.raw_circle p {
width: 60px;
height: 58px;
margin: 0 4px 0 4px;
padding-top: 16px;
}
/* できること */
.grid_item p {
padding: 12px  0 0 5px;  
line-height: 1.3;
}
#to_design {
font-size: 2.8vw;
padding-right: 0;
padding-left: 5px;
}
#to_design_center {
margin-left: 5px;
}
img#eng_design {
top: -5px;
}
#to_design p:nth-child(2) {
margin-top: 8px;
}
#button1 {
left: 0;    
}

/* アプローチ */
section#approach {
max-height: 750px;
}
#approach p.rad20 {
max-width: 275px;
}
section#approach::before {
left: 35vw;
}

/* 料金 */
.single_line {
max-height: 107px;
}
#price .single_line h3 {
font-size: 13px;
}
#sample_left {
padding-top: 0px;
}
.single_line div.ryoukin {
padding-top: 0;
}
.single_line #sample_right {
padding-top: 0;
}
.single_line .large_text {
padding-top: 15px;
}
/* 料金　オプション */
article#option::before {
left: 20vw;
top: -91px;
}  

#side_small_text {
font-size: 10px;
}

#option {
padding-left: 12px;
padding-right: 12px;
}

/* 流れ */
.flow_box:nth-child(5) .flow_circle p {
padding-top: 16%;
}

.flow_circle::after {
width: 7px;
height: 4px;
}

}   


/* ページ内アンカー */
.anchor {

padding-top: 75px;
margin-top: -75px;
}