@charset "utf-8";
/*******************************************/
/* HP                                      */
/*******************************************/
.hero-hp{ background:url(../img/hp/hero_01.jpg) no-repeat center bottom; background-size:cover; }
.hero-hp-item1{ position:absolute; top:12px; right:12px; }
.hero-hp-item1 img{ width:171px; height:160px; }
.hero-hp-item2{ color:#fff; font-size:3.6rem; font-weight:bold; line-height:4.6rem; position:absolute; text-shadow:0px 0px 8px rgba(0,0,0,0.7); top:108px; left:56px; }
.hpSpecial-box{ border:1px solid #d4dbdf; box-shadow:0px 12px 8px -8px rgba(0,0,0,0.1); display:flex; flex-wrap:nowrap; margin:40px 0; width:100%; }
.hpSpecial-box-img{ min-height:0%; overflow:hidden; position:relative; width:50%; }
.hpSpecial-box-img::before{ border-style:solid; border-width:16px 32px 16px 0; border-color:transparent #ffffff transparent transparent; content:""; display:block; position:absolute; top:50%; right:0; margin-top:-16px; width:0; height:0; }
.hpSpecial-box-txt{  flex:1; min-height:0%; padding:40px; }
.hpSpecial-box-txt h3{ font-size:2.8rem; font-weight:500; margin-bottom:48px; position:relative; }
.hpSpecial-box-txt h3::before{ color:#46b2e7; content:"Special"; display:block; font-size:1.8rem; font-family:'Oxygen', sans-serif; letter-spacing:0.2rem; margin-bottom:16px; }
.hpSpecial-box-txt h3::after{ background:#46b2e7; content:""; display:block; position:absolute; bottom:-20px; left:0; width:71px; height:2px; }
.hpUservoice-profile{ border-top:3px double #ccc; border-bottom:3px double #ccc; padding:32px 0; }
.hpUservoice-profile p img{ float:right; width:100px; height:100px; }
.hpUservoice-profile-inr{ float:left; width:calc(100% - 124px);  }
.hpUservoice-profile dl{ display:table; }
.hpUservoice-profile dt{ display:table-cell; width:140px; line-height:2.8rem; }
.hpUservoice-profile dt{ display:table-cell; line-height:2.8rem; }
.hpUservoice-qa dl{ margin-bottom:32px; }
.hpUservoice-qa dl dt{ color:#3a84df; font-size:1.8rem; font-weight:bold; line-height:2.8rem; }
.hpUservoice-qa dl dd{ font-size:1.8rem; line-height:2.8rem; }
.hpUservoice-related{ border-top:4px solid #333; padding-top:24px; }
.hpUservoice-related-box a{ border:1px solid #e4e7ec; display:inline-block; padding:8px; width:100%; height:100%; }
.hpUservoice-related-box p img{ margin-bottom:16px; }
.hpUservoice-profile a{ transition:all 0.3s ease; }
.hpUservoice-profile a:hover{ color:#0068b7; }
.h6thUl{ display:flex; flex-wrap:wrap; margin-left:-24px; }
.h6thUl li{ margin-left:24px; margin-bottom:32px; min-height:0%; width:calc(25% - 24px); }
.h6thUl li a{ display:block; width:100%; height:100%; transition:ease 0.3s opacity; }
.h6thUl li a:hover{ opacity:0.5; }
.h6thUl li a img{ margin-bottom:12px; }
.hp-result-item1{ margin-bottom:8px; }
.hp-result-item2{ font-size:1.4rem; font-weight:bold; line-height:2.2rem; }
.hp-result-item3{ font-size:1.2rem; line-height:2.0rem; }
.hp-result-tag1::before, .hp-result-tag2::before{ color: #fff; display: table; font-size: 1.0rem; font-weight: normal; line-height: 1em; letter-spacing: -0.1em; margin-bottom: 4px; padding: 2px 6px; }
.hp-result-tag1::before{ background: rgb(0,129,204); content: "オリジナル"; }
.hp-result-tag2::before{ background: rgb(0,162,106); content: "テンプレート"; }
.ul-hp1{ padding-top:16px; }
.ul-hp1 li{ font-size:1.7rem; font-weight:bold; line-height:2.6rem; margin-bottom:24px; padding-left:26px; position:relative; letter-spacing:-0.1rem; }
.ul-hp1 li::before{ background:url(../img/hp/hp_img_35.svg) no-repeat; background-size:19px 16px; background-position:left center; content:""; display:block; margin-right:6px; position:absolute; top:2px; left:0; width:19px; height:16px; }
.ul-hp1 li::after{ background:#efefef; content:""; display:block; width:100%; height:2px; }
.ul-hp2{ padding-top:16px; }
.ul-hp2 li{ font-size:1.7rem; font-weight:bold; line-height:2.6rem; margin-bottom:24px; padding-left:26px; position:relative; letter-spacing:-0.1rem; }
.ul-hp2 li::before{ background:url(../img/hp/hp_img_36.svg) no-repeat; background-size:19px 16px; background-position:left center; content:""; display:block; margin-right:6px; position:absolute; top:5px; left:0; width:19px; height:16px; }
.ul-hp2 li::after{ background:#efefef; content:""; display:block; width:100%; height:2px; }
.underLine-yellow::after{ background:#ffde00; content:""; display:block; width:auto; height:8px; position:relative; top:-14px; z-index:-1; }
.tH4-hp1{ color:#ff0037; font-size:2.4rem; margin-bottom:16px; }
.tH4-hp2{ color:#76a154; font-size:2.4rem; margin-bottom:16px; }
.hp-flow-ttl1::before, .hp-flow-ttl2::before, .hp-flow-ttl3::before, .hp-flow-ttl4::before, .hp-flow-ttl5::before, .hp-flow-ttl6::before{ background:#0068b7; border-radius:16px; color:#fff; display:inline-block; line-height:32px; text-align:center; margin-right:8px; width:32px; height:32px; }
.hp-flow-ttl1::before{ content:"1"; }
.hp-flow-ttl2::before{ content:"2"; }
.hp-flow-ttl3::before{ content:"3"; }
.hp-flow-ttl4::before{ content:"4"; }
.hp-flow-ttl5::before{ content:"5"; }
.hp-flow-ttl6::before{ content:"6"; }
.dl-hp1{ margin: 12px 0 24px; }
.dl-hp1 dt{ font-size: 1.8rem; font-weight: bold; letter-spacing: 0.1em; line-height: 1.4em; margin-bottom: 8px; padding-left: 1em; text-align: center; }
.dl-hp1 dt span{ font-size: 1.2rem; font-weight: normal; letter-spacing: 0; margin-left: 8px; }
.dl-hp1 dd{ line-height: 1.6em; text-align: center; }
.hpTop-box-color{ display: flex; flex-wrap: nowrap; margin: 0 auto; width: fit-content; }
.hpTop-box-color p{ border: 1px solid #ccc; border-radius: 2px; font-size: 1.2rem; line-height: 18px; margin-right: 10px; padding: 0 6px; }
.ul-hp-color{ display: flex; flex-wrap: nowrap; }
.ul-hp-color li{ margin-right: 6px; position: relative; width: 20px; height: 20px; }
.ul-hp-color li button{ border: none; border-radius: 100%; cursor: pointer; transition: all 0.2s ease; width: 20px; height: 20px; }
.ul-hp-color li button:hover{ opacity: 0.5; }
.c1-1{ background: #41b1e6; }
.c1-2{ background: #0b9512; }
.c1-3{ background: #0047b1; }
.c1-4{ background: #2aaaa8; }
.c1-5{ background: #c581ac; }
.c1-6{ background: #bc9677; }
.c2-1{ background: #7dac0b; }
.c2-2{ background: #41b1e6; }
.c2-3{ background: #ff9393; }
.c2-4{ background: #ff9c3c; }
.c3-1{ background: #333333; }
.c3-2{ background: #998c68; }
.c3-3{ background: #005d39; }
.c3-4{ background: #5d5043; }
.c3-5{ background: #998c68; }
.c3-6{ background: #910066; }

.tbl-hp-price{ margin-left: auto; margin-right: auto; width:100%; }
.tbl-hp-price th{ padding: 16px; }
.tbl-hp-price td{ border:1px solid #ccc; padding:16px; line-height:2.8rem; text-align:center; vertical-align:middle; }
.tbl-hp-price td:nth-of-type(1){ background:#8b9bce; color:#fff; text-align: left; width: 20%; }
.tbl-hp-price td:nth-of-type(n+2){ width: 40%; }
.hp-item1{ display: inline-block; font-size: 2.0rem; font-weight: bold; text-align: center; }
.hp-item2{ color: #c51c68; font-size: 3.6rem; font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; }
.hp-item2 span{ font-size: 1.4rem; }
.hp-item3{}
.hp-item3 br{ display: none; }
.hp-item4, .hp-item5{ border-radius: 8px; color: #fff; display: inline-block; font-size: 2.4rem; font-weight: bold; line-height: 48px; padding: 0 32px; position: relative; text-align: center; min-width: 300px; }
.hp-item4::after, .hp-item5::after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 12px 10px 0 10px; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); }
.hp-item4{ background: #0068b7; }
.hp-item4::after{ border-color: #0068b7 transparent transparent transparent; }
.hp-item5{ background: #46b2e7; padding: 0 0 0 32px; }
.hp-item5::before{ background: red; color: #fff; content: "New"; font-size: 1.2rem; font-weight: normal; line-height: 1em; padding: 2px 4px; position: absolute; top: 15px; left: 16px; }
.hp-item5::after{ border-color: #46b2e7 transparent transparent transparent; }
.hp-item6{ font-size: 1.4rem; line-height: 1.2em; }
.dl-hp2{ margin: 0 auto; width: 80%; }
.dl-hp2 dt{ font-size: 3.6rem; font-weight: bold; font-family: Arial, Helvetica, "sans-serif"; line-height: 1em; vertical-align: middle; }
.dl-hp2 dt span{ font-size: 1.4rem; }
.dl-hp2 dd{ font-size: 1.4rem; text-align: left; }
.hpCTA{ background: url("../img/hp/hp_img_47.jpg") no-repeat center/cover; box-shadow: 0px 12px 8px -8px rgba(0,0,0,0.1); color: #fff; margin: 40px 0; padding: 64px 64px 40px; width: 100%; }
.hpCTA h2{ font-size: 4.0rem; font-weight: bold; text-align: center; }
.hpCTA h2 span{ display: block; font-size: 2.4rem; margin: 0.8em 0 1.2em; }
.hpCTA-inr{ display: flex; flex-wrap: nowrap; justify-content: space-between; }
.hpCTA-inr div{ background: rgba(255,255,255,0.9); padding: 32px; text-align: center; width: calc(50% - 32px); }
.hpCTA-inr div h3{ color: #333; font-size: 2.0rem; margin-bottom: 1.6em; }
.hpCTA-inr div dl dt{ margin-bottom: 4px; }
.hpCTA-inr div dl dt span{ background: url("../img/hp/hp_img_48.svg") no-repeat left center/28px 26px; color: #333; padding-left: 40px; font-size: 3.8rem; font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; letter-spacing: 0.03em; line-height: 1em; }
.hpCTA-inr div dl dd{ color: #666; font-size: 1.4rem; }


#service1, #service2, #service3, #service4, #service5, #templatePlan{ margin-top:-100px; padding-top:100px; }
#hp-inquiry{ margin-top:-160px; padding-top:160px; }

/*20240704*/
.hpMb-nayami{ padding: 24px 24px; background: #efefef; }
.hpMb-nayami img { height: 180px; }
.hdg-mybusiness { background: url("../img/hp/hp_googlemap.png") no-repeat center bottom 56px/ 57px ; color:#0068b7; font-size:3.2rem; font-weight:500; line-height:4.2rem; text-align:center; padding-bottom:126px; position:relative; width:100%; }
.hdg-mybusiness::after{ background:#46b2e7; content:""; display:block; width:72px; height:2px; position:absolute; bottom:40px; left:50%; margin-left:-36px; }
.mbMeritTop { background: #E6EDF7; margin: 0 auto; padding: 64px 0 40px; position: relative; width: 944px; }
.mbMeritTop::before { background: #E6EDF7; content: ""; height: 100%; position: absolute; top: 0; left: -120px; width: 120px; }
.mbMeritTop::after { background: #E6EDF7; content: ""; height: 100%; position: absolute; top: 0; right: -120px; width: 120px; }
.mbMeritBtm { background: #CCEDFF; margin: 0 auto; padding: 32px 0px; position: relative; width: 944px; }
.mbMeritBtm ::before { background: #CCEDFF; content: ""; height: 100%; position: absolute; top: 0; left: -120px; width: 120px; }
.mbMeritBtm ::after { background: #CCEDFF; content: ""; height: 100%; position: absolute; top: 0; right: -120px; width: 120px; }
.btnMbMerit a { background: #0068B7 url("../img/cmn/arrow_white.svg") no-repeat; background-position: right 24px center; border: 2px solid #0068b7; color: #fff; cursor: pointer; display: block; font-size: 1.8rem; font-weight: bold; height: 56px; line-height: 52px; text-align: left; transition: ease 0.2s all; padding: 0 24px; text-decoration: none; width: 372px;  }
.mbPrise { background: #F8F7F6; padding: 56px 0; position: relative; margin: 0 auto; width: 944px; }
.mbPrise::before { background: #F8F7F6; content: ""; height: 100%; position: absolute; top: 0; left: -120px; width: 120px; }
.mbPrise::after { background: #F8F7F6; content: ""; height: 100%; position: absolute; top: 0; right: -120px; width: 120px; }
.mbPriseTop { background: #fff; margin: 0 auto 8px; width: 720px; }
.mbTop { background: #2D70CF; border-radius: 16px 16px 0 0; display: flex; justify-content: space-between; padding: 32px; }
.mbTop p { color: #fff; font-size: 2.4rem; font-weight: bold; }
.mbTop span { font-size: 3.2rem; }
.mbBtm { border-left: 4px solid #2D70CF; border-right: 4px solid #2D70CF; border-bottom: 4px solid #2D70CF; border-radius: 0 0 16px 16px; padding: 32px; }

.mbBtm .mbUl-list{ display: flex; grid-column-gap:40px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 32px; }
.mbBtm .mbUl-list li{ border-bottom: 1px solid #CFD6DE; padding: 24px 16px; width: calc(50% - 20px); }
.mbBtm .mbUl-list li:nth-of-type(-n+2){ border-top: 1px solid #CFD6DE; }
.mbBtm .mbUl-list li dl dt{ font-size: 1.8rem; font-weight: 700; margin-bottom: 0.6em; }
.mbBtm .mbUl-list li dl dd{ font-size: 1.4rem; line-height: 1.6em; }
.mbBtmTxt { font-size: 2.0rem; font-weight: bold; text-align: center;}
.mbBtmTxt .mbBtmBr { display: block;}
.mbBtmTxt .mbBtmBold { border-bottom: 7px solid #2D70CF; }
.mbPriseOther { color: #0068B7; font-weight: bold; }
.mbPriseBtm { margin: 0 auto 8px; width: 100%; }
.mbPriseBox { display: flex; margin-left: -32px; }
.mbBoxInr { background: #fff; border: 4px solid #0068B7; border-radius: 24px; display: flex; flex-direction: column; padding: 24px 50px; position: relative; margin-left: 32px; width: calc(100%/2); }
.mbBoxInr .mbBoxTitle { border-left: 5px solid #2D70CF; font-weight: bold; padding-left: 16px; text-align: center; margin: 0 auto 16px;}
.mbBoxDiv { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 24px); }
.mbBoxNaiyo span { display: block; }
.mbBoxBold { font-weight: bold; }

/*******************************************/
/* responsive                              */
/*******************************************/

@media screen and (max-width:767px) {
	.hero-hp{ background:url(../img/hp/hero_01.jpg) no-repeat left bottom; background-size:cover; }
	.hero-hp-item1{ position:absolute; top:10px; left:inherit; right:10px; }
	.hero-hp-item1 img{ width:100px; height:auto; }
	.hero-hp-item2{ font-size:2.0rem; line-height:2.8rem; top:88px; left:16px; }
	.hpSpecial-box{ display:block; }
	.hpSpecial-box-img{ width:100%; }
	.hpSpecial-box-img::before{ display:none; }
	.hpSpecial-box-img img{ width:100%; height:auto; }
	.hpSpecial-box-txt{ padding:16px; }
	.hpSpecial-box-txt h3{ font-size:2.0rem; margin-bottom:4.8vh; }
	.hpUservoice-profile{ padding:16px; }
	.hpUservoice-profile p img{ float:none; }
	.hpUservoice-profile-inr{ float:none; margin-bottom:24px; width:100%; }
	.hpUservoice-profile-inr dl{ margin-bottom:16px; }
	.hpUservoice-profile-inr dt{ display:block; width:100%; }
	.hpUservoice-profile-inr dt{ display:block; }
	.h6thUl{ display:block; margin-left:0; }
	.h6thUl li{ margin-left:0; margin-bottom:32px; min-height:0%; width:100%; }
    .h6thUl li a{ height:auto; }
    .hp-item1{ font-size: 1.6rem; line-height: 2.8rem; text-align: left; }
    .tbl-hp-price{ border-bottom: 1px solid #ccc; }
    .tbl-hp-price thead{ width: 100%;}
    .tbl-hp-price tr{ display: flex; flex-wrap: wrap; }
    .tbl-hp-price th{ padding: 0 4px 16px; width: 50%; }
    .hp-item3 br{ display: block; }
    .hp-item4, .hp-item5{ font-size: 1.5rem; min-width: 100%; padding: 0 4px; }
    .hp-item5::before{ top: -7px; }
    .cell-cus1{ display: none; }
    .tbl-hp-price tr td{ border-bottom: none; }
    .tbl-hp-price tr td:nth-of-type(3){ border-left: none; }
    .tbl-hp-price tr td.cell-cus2{ border-bottom: none; padding: 4px 12px; width: 100%; }
    .tbl-hp-price tr td.cell-cus3{ width: 50%; padding: 12px; }
    .tbl-hp-price tr td.cell-cus3:nth-of-type(2+n){ border-left: none; }
    .tbl-hp-price tr td.cell-cus4{ width: 100%; padding: 12px; }
    .hpTop-box-color{ margin: 0 auto 40px; }
    .hpCTA{ padding: 32px 16px 16px; }
    .hpCTA h2{ font-size: 2.0rem; }
    .hpCTA h2 span{ font-size: 1.4rem; margin: 0.8em 0 1.2em; }
    .hpCTA p.t18{ font-size: 1.6rem; line-height: 2.4rem; }
    .hpCTA-inr{ display: block; }
    .hpCTA-inr div{ padding: 24px 16px 16px; width: 100%; }
    .hpCTA-inr div:nth-of-type(1){ margin-bottom: 16px; }
    .hpCTA-inr div h3{ font-size: 1.8rem; margin-bottom: 1em;}
    .hpCTA-inr div dl dt span{ font-size: 3.0rem; }
    .hpCTA-inr div dl dd{ font-size: 1.2rem; }

	.hdg-mybusiness { font-size: 2.4rem; line-height: 3.6rem; }
	.btnMbMerit a { width: 100%; }
	.mbMeritTop { width: 100%; }
	.mbMeritBtm { width: 100%; }
	.mbPrise { padding: 56px 16px; }
	.mbPriseTop { width: 100%; }
	.mbPriseMain { margin-bottom: 32px; width: 100%; }
	.mbTop { display: block; padding: 24px; }
	.mbTop p { text-align: center; }
	.mbTop-title { margin-bottom: 16px; }
	.mbBtm { padding: 32px 16px; }
    .mbBtm .mbUl-list{ display: block; }
    .mbBtm .mbUl-list li{ padding: 24px 0;  width: 100%; }
	.mbBtmTxt .mbBtmBr { display: inline;}
	.mbBtmTbl { display: block; margin-left: 0; }
	.mbBtmTbl div { margin-left: 0; width: 100%; }
	.mbBtmTbl-left:last-child { border-bottom: none; }
	.mbPrise { width: 100%; }
	.mbPriseBox { display: block; margin-left: 0; padding: 0; }
	.mbBoxInr { margin-left: 0; margin-bottom: 16px; padding: 24px; width: 100%; }
	.mbBoxNaiyo span { display: inline; }
	.mbBoxNaiyo { margin-bottom: 8px; }
}