@charset "UTF-8";



body, html{
	margin: 0;
	padding: 0;
}

/* normal */
@font-face {
  font-family: "myfont";
  src: url("../CSS/fonts/GenShinGothic-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* bold */
@font-face {
  font-family: "myfont";
  src: url("../CSS/fonts/GenShinGothic-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

.affiliate-sp{
	display:none;
}

.affiliate-pc{
	text-align: center;
	margin-top: 1vw;
	margin-bottom: 1vw;
}

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 5vw;
    bottom: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    width: 5vw;
}

.fv-logo{
	text-align: center;
	margin-top: 4vw;
	margin-bottom: 0.5vw;
}

.fv-logo img{
	width: 15vw;
}
.search-form-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 2px solid #f7b0b0;
    border-radius: 3px;
	width: 12vw;
	margin-left: 80vw;
	margin-bottom: 1vw;
}

.search-form-1 input {
    width: 10.5vw;
    height: 1.8vw;
    padding: 5px 15px;
    border: none;
    box-sizing: border-box;
    font-size: 0.8vw;
    outline: none;
}

.search-form-1 input::placeholder{
    color: #777777;
}

.search-form-1 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5vw;
    height: 1.8vw;
    border: none;
    background-color: #f7b0b0;
    cursor: pointer;
}

.search-form-1 button::after {
    width: 0.8vw;
    height: 0.8vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

/*------メインビジュアル------*/

.mainvisual h1{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 2.2vw;
	color: #fff;
	background-color: #F7B0B0;
	text-align: center;
	padding-top: 0.2vw;
	padding-bottom: 0.2vw;
}

.date h2{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	color: #222222;
	margin-left: 75vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
}

.mv-image-sp{
	display: none;
}

.mv-image{
	text-align: center;
}

.mv-image img{
	width: 62.5vw;
}

/*------------序論----------*/
.first{
	
}

.rounded-box p{
	color: #222222;
	margin: 1vw 2vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	color: #222222;
}
.rounded-box {
  width: 30vw;
  height: auto;
  border-radius: 39px;
  background-color: #F5F5F5;
  justify-content: center;
  align-items: center;
	color: #222;
	padding: 1vw 1vw;
	margin-left: 35vw;
}

.dotted{
  border-bottom:dotted 2px;
  color: #707070;
	width: 24vw;
}

.highlight {
  text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgb(247,176,176,0.4);
  text-underline-opacity: 0.4;
  text-decoration-skip-ink: none;
}

.b-intro{
	margin-top: 3vw;
	margin-left: 18.75vw;
	margin-right: 18.75vw;
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 1vw;
}

.intro{
	margin-left: 18.75vw;
	margin-right: 18.75vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
}

.b-highlight{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 1vw;
	text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgb(247,176,176,0.4);
  text-underline-opacity: 0.4;
  text-decoration-skip-ink: none;
}

.bold{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 1vw;
}

.under{
	text-decoration: underline;
}
/*---------目次----------*/

.toc {
	margin-top: 3vw;
    margin-bottom: 30px;
    border: 1px solid #f7b0b0;
    border-radius: 26px;
	width: 32.5vw;
	margin-left: 33.75vw;
}

.toc div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #f7b0b0;
	border-radius: 23px 23px 0px 0px;
    color: #fff;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1.2vw;
}

.toc ol {
    list-style-type: none;
    margin-left: 2vw;
    overflow: hidden;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
}

.toc > ol {
    padding: 1em 1em 1em 3em;
	counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}

.toc > ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 25px;
}

.toc > ol > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.5vw;
  height: 0.5vw;
  background-color: #F7B0B0;
  border-radius: 50%;
}

.toc > ol > li > a::before {
  content: counter(item) ". ";
}

.toc > ol > li > ol {
  list-style-type: none;
  padding-left: 20px;
}

.toc > ol > li > ol > li {
  padding-left: 0;
}

.toc > ol > li > ol > li::before {
  content: none;
}


.toc ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc li {
	list-style-type: none;
    padding: 5px 0;
    font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 1.5vw;
	position: relative;
}
.toc li:before {
    border-radius: 50%; /*丸くする*/
    width: 5px; /*点の幅*/
    height: 5px; /*点の高さ*/
    display: block;
    position: absolute; /*絶対配置*/
    left: 0; /*点の位置*/
    top: 0.6em; /*点の位置*/
    content: "";
    background: #1ec4e6; /*点の色*/
    }

.toc ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc a {
    color: #333;
    text-decoration: none;
}

/*--------1.ホームページ作成方法-----*/
.heading {
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 1.7vw;
	margin-top: 5vw;
    padding: .5em .7em;
    border-left: 10px solid #f7b0b0;
    color: #222222;
	margin-left: 18.75vw;
}


.n-rounded-box p{
	color: #222222;
	margin: 0.5vw 0.25vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
	color: #222222;
}
.n-rounded-box {
	margin-top: 2.5vw;
  width: 50vw;
  height: auto;
  border-radius: 15px;
  background-color: #F5F5F5;
  justify-content: center;
  align-items: center;
	color: #222;
	padding: 1vw 1vw;
	margin-left: 25vw;
}

.s-rounded-box p{
	color: #222222;
	margin: 0.5vw 0.25vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 0.7vw;
	line-height: 1.2vw;
	color: #222222;
}
.s-rounded-box {
  width: 44vw;
  height: auto;
  background-color: #F5F5F5;
  justify-content: center;
  align-items: center;
	color: #222;
	padding: 0.2vw 0.5vw;
	margin-left: 28vw;
	margin-bottom: 3.5vw
}


.self h3{
	margin-top: 5vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1.7vw;
	color: #222222;
	margin-left: 25vw;
}

.self p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
	color: #222222;
	margin-left: 27vw;
	margin-right: 27vw;
	margin-top: 1vw;
}

.self .more{
	margin-left: 61vw;
	font-size: 0.75vw;
}

.order h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1.7vw;
	color: #222222;
	margin-left: 25vw;
	margin-top: 3.5vw;
}

.order p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
	color: #222222;
	margin-left: 27vw;
	margin-right: 27vw;
	margin-top: 1vw;
}


.order img{
	width: 28vw;
	margin-left: 36vw;
	margin-top: 1vw;
}


/*-------2.ホームページをご自身で作成する場合----*/
.WP h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1.7vw;
	color: #222222;
	margin-left: 25vw;
	margin-top: 5vw;
}

.explanation{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
	color: #222222;
	margin-left: 27vw;
	margin-right: 27vw;
	margin-top: 1vw;
}

.JWP h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1.7vw;
	color: #222222;
	margin-left: 25vw;
}

.w-rounded-box p{
	color: #222222;
	margin: 0.5vw 2vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
	color: #222222;
}
.w-rounded-box {
  width: 50vw;
  height: auto;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
	border: #707070 1px solid;
	padding: 1vw 1vw;
	margin-left: 25vw;
	margin-top: 1vw;
	margin-bottom: 3.5vw;
}

.JWP img{
	width: 20.8vw;
	margin-left: 11.5vw;
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
}


.Cording h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1.7vw;
	color: #222222;
	margin-left: 25vw;
}

/*-------3.おすすめの業者----*/
.c-title{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 1.3vw;
	margin-left: 25vw;
	margin-top: 1vw;
}

.c-img{
	width: 30vw;
	margin-left: 35vw;
	margin-top: 1vw;
}

.url{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	margin-left: 35vw;
	font-size: 0.7vw;
}

.NOREN a{
	text-decoration: none;
	color: blue;
}

.hirogare a{
	text-decoration: none;
	color: blue;
}

.hpranger a{
	text-decoration: none;
	color: blue;
}

.realize a{
	text-decoration: none;
	color: blue;
}

.saitoya a{
	text-decoration: none;
	color: blue;
}

.look a{
	text-decoration: none;
	color: blue;
}

.hpcom a{
	text-decoration: none;
	color: blue;
}

.sasajima a{
	text-decoration: none;
	color: blue;
}

.tmp a{
	text-decoration: none;
	color: blue;
}


.p-rounded-box p{
	color: #fff;
	margin: 0.5vw 0.25vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
}
.p-rounded-box {
  width: 50vw;
  height: auto;
  border-radius: 15px;
  background-color: #F7B0B0;
  justify-content: center;
  align-items: center;
	padding: 1vw 1vw;
	margin-left: 25vw;
	margin-top: 1vw;
}


.info{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	margin-left: 26vw;
	margin-top: 1vw;
	margin-bottom: 5vw;
}









/*-------4.まとめ----*/
.summary p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 1vw;
	line-height: 2.2vw;
	color: #222222;
	margin-left: 27vw;
	margin-right: 27vw;
	margin-top: 3.5vw;
}









.copy-url-container {
            position: relative;
            display: inline-block;
        }
        .copy-url-image {
            cursor: pointer;
            width: 24px; /* 適切なサイズに調整してください */
            height: 24px;
        }
        .copy-url-message {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            background-color: #F7B0B0;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        .copy-url-message.show {
            opacity: 1;
        }
/*-------フッター前----*/
.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222222;
	font-size: 0.7vw;
	margin-top: 5vw;
}

.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #f7b0b0;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

.container {
    display: flex;
	margin-left: 30vw;
	margin-right: 30vw;
    justify-content: space-around; /* 画像の間に均等に余白を設定 */
}
.container img {
    width: 13.5vw; /* 画像が3つ並ぶように設定 */
    height: 3.45vw; /* 高さを幅に揃える */
    object-fit: cover; /* 画像がコンテナを埋めるように調整 */
}


.hpranger_cp {
	position: relative;
	margin-left: 32.5vw;
	margin-top: 10vw;
}

.bg_cp_sp{
	display: none;
}
.bg_cp{
	position: absolute;
	width: 35vw;
}
.hplogo{
	position: absolute;
	top: 1vw;
	left: 14vw;
	display: block;
	width: 8vw;
}

.cp_title{
	position: absolute;
	top: 3.5vw;
	left: 7vw;
	width: 21vw;
}

.hpranger_cp p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	
}

.cp_info{
	position: absolute;
	top: 6.5vw;
	left: 4.5vw;
	right: 4.5vw;
	font-size: 0.9vw;
}
.request-contact{
	position: absolute;
	top: 12vw;
	left: 12.5vw;
	right: 12.5vw;
	font-size: 0.6vw;
}

.request-sp{
	display: none;
}

.request{
	position: absolute;
	display: block;
	width: 30vw;
	top: 13vw;
	left: 2.5vw;
}

.contact-sp{
	display: none;
}

.contact{
	position: absolute;
	width: 30vw;
	top: 16vw;
	left: 2.5vw;
}


/*-----フッター-------*/
/*Contact*/

.contactbox {
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
	margin-top: 35vw;
	margin-left: 30%;
	margin-bottom: 10%;
	padding: 3%;
border: #000000 1px solid; /*境界線の指定*/
width:40%;
text-align: center;
}

.contactbox img{
		width: 20vw;
	}

/*運営元*/
.company{
	display: flex;
  justify-content: center;
	margin-bottom: 2%;
	font-size: 1vw;
}
.company .company-img, .company-3steps{/*画像と3段を横並びに*/
	display: inline-block;
    vertical-align: top;

}

.company-img{
	width: 13vw;
}


.company-3steps{
	margin-left: 2%;
}

.company01{
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
}

.company02 li{/*横並びに*/
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
	display: inline-block;
    vertical-align: top;
	
}

.company02 li+ li {/*隣との間の縦線*/
  border-left: 1px solid #333;
  padding: 0 10px;
}

.company03 li{
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
	
	display: inline-block;
    vertical-align: top;
	margin-top: 4%;
	margin-right: 4%;
}

/* copyright */
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #48483A;
  text-align: center;
  background: #F7B0B0;
}

.footer-copyright a {
  text-decoration: none;
  color: #48483A;
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
.affiliate-pc{
	display: none;
}
.affiliate-sp{
	display: block;
	text-align: center;
	margin-top: 2vw;
	margin-bottom: 2vw;
}

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 5vw;
    bottom: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    width: 15vw;
}	

	.fv-logo{
	text-align: center;
	margin-top: 10vw;
	margin-bottom: 5vw;
}

.fv-logo img{
	width: 26.5vw;
}
.search-form-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 2px solid #f7b0b0;
    border-radius: 3px;
	width: 40vw;
	margin-left: 57vw;
	margin-bottom: 1vw;
}

.search-form-1 input {
    width: 34vw;
    height: 5.5vw;
    padding: 5px 15px;
    border: none;
    box-sizing: border-box;
    font-size: 2.5vw;
    outline: none;
}

.search-form-1 input::placeholder{
    color: #777777;
}

.search-form-1 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6vw;
    height: 6vw;
    border: none;
    background-color: #f7b0b0;
    cursor: pointer;
}

.search-form-1 button::after {
    width: 4vw;
    height: 4vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

/*------メインビジュアル------*/

.mainvisual h1{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 4.5vw;
	color: #fff;
	background-color: #F7B0B0;
	text-align: center;
	padding-top: 0.2vw;
	padding-bottom: 0.2vw;
}

	.linebreak{
		margin-left: 35vw;
		margin-right: 3.5vw;
		margin-top: 1vw;
	}

.date h2{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	color: #222222;
	margin-left: 10vw;
	margin-top: 5vw;
	margin-bottom: 1.67vw;
}

.mv-image-sp{
	display: block;
	text-align: center;
	margin-bottom: 10vw;
}
.mv-image{
	display: none;
}

.mv-image-sp img{
	width: 90vw;
}

/*------------序論----------*/
.first{
	
}

.rounded-box p{
	color: #222222;
	margin: 1vw 10vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	color: #222222;
	line-height: 7vw;
}
.rounded-box {
  width: 80vw;
  height: auto;
  border-radius: 5px;
  background-color: #F5F5F5;
  justify-content: center;
  align-items: center;
	color: #222;
	padding: 1vw 1vw;
	margin-left: 10vw;
}

.dotted{
  border-bottom:dotted 2px;
  color: #707070;
	width: 60vw;
}

.highlight {
  text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgb(247,176,176,0.4);
  text-underline-opacity: 0.4;
  text-decoration-skip-ink: none;
}

.b-intro{
	margin-top: 5vw;
	margin-left: 5vw;
	margin-right: 5vw;
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 2.5vw;
	line-height: 5vw;
}

.intro{
	margin-left: 5vw;
	margin-right: 5vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
}

.b-highlight{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 2.5vw;
	text-decoration: underline;
  text-underline-offset: -0.2em;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgb(247,176,176,0.4);
  text-underline-opacity: 0.4;
  text-decoration-skip-ink: none;
}

.bold{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 2.5vw;
}

.under{
	text-decoration: underline;
}
/*---------目次----------*/

.toc {
	margin-top: 5vw;
    margin-bottom: 30px;
    border: 1px solid #f7b0b0;
    border-radius: 26px;
	width: 80vw;
	margin-left: 10vw;
}

.toc div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 10px 0;
    background-color: #f7b0b0;
	border-radius: 23px 23px 0px 0px;
    color: #fff;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 3vw;
}

.toc ol {
    list-style-type: none;
    margin-left: 2vw;
    overflow: hidden;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
}

.toc > ol {
    padding: 1em 1em 1em 3em;
	counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}

.toc > ol > li {
  counter-increment: item;
  position: relative;
  padding-left: 25px;
}

.toc > ol > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 2vw;
  height: 2vw;
  background-color: #F7B0B0;
  border-radius: 50%;
}

.toc > ol > li > a::before {
  content: counter(item) ". ";
}

.toc > ol > li > ol {
  list-style-type: none;
  padding-left: 20px;
}

.toc > ol > li > ol > li {
  padding-left: 0;
}

.toc > ol > li > ol > li::before {
  content: none;
}


.toc ol ol {
    margin-top: 5px;
    padding-left: 1.1em;
}

.toc li {
	list-style-type: none;
    padding: 5px 0;
    font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 3vw;
	position: relative;
}
.toc li:before {
    border-radius: 50%; /*丸くする*/
    width: 5px; /*点の幅*/
    height: 5px; /*点の高さ*/
    display: block;
    position: absolute; /*絶対配置*/
    left: 0; /*点の位置*/
    top: 0.6em; /*点の位置*/
    content: "";
    background: #1ec4e6; /*点の色*/
    }

.toc ol ol li {
    font-weight: 500;
    font-size: .9em;
}

.toc a {
    color: #333;
    text-decoration: none;
}

/*--------1.ホームページ作成方法-----*/
.heading {
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 3vw;
	margin-top: 15vw;
    padding: .3em .7em;
    border-left: 5px solid #f7b0b0;
    color: #222222;
	margin-left: 5vw;
}

.n-rounded-box p{
	color: #222222;
	margin: 0.5vw 0.25vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
}
.n-rounded-box {
	margin-top: 2.5vw;
  width: 80vw;
  height: auto;
  border-radius: 15px;
  background-color: #F5F5F5;
  justify-content: center;
  align-items: center;
	color: #222;
	padding: 1.5vw 2vw;
	margin-left: 10vw;
}

.s-rounded-box p{
	color: #222222;
	margin: 1vw 1vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
}
	
.s-rounded-box {
  width: 90vw;
  height: auto;
  background-color: #F5F5F5;
  justify-content: center;
  align-items: center;
	color: #222;
	padding: 1vw 5vw;
	margin-left: 5vw;
	margin-bottom: 5vw;
}


.self h3{
	margin-top: 10vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 3vw;
	color: #222222;
	margin-left: 5vw;
}

.self p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
	color: #222222;
	margin-left: 10vw;
	margin-right: 10vw;
	margin-top: 1vw;
}

.self .more{
	margin-left: 60vw;
	font-size: 2vw;
	text-decoration-line: underline;
	text-decoration-color: #222222;
}

.order h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 3vw;
	color: #222222;
	margin-left: 5vw;
	margin-top: 5vw;
}

.order p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
	color: #222222;
	margin-left: 10vw;
	margin-right: 10vw;
	margin-top: 1vw;
}


.order img{
	width: 50vw;
	margin-left: 25vw;
	margin-top: 1vw;
}


/*-------2.ホームページをご自身で作成する場合----*/
.WP h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 3vw;
	color: #222222;
	margin-left: 5vw;
	margin-top: 5vw;
}

.explanation{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
	color: #222222;
	margin-left: 10vw;
	margin-right: 10vw;
	margin-top: 1vw;
}

.JWP h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 3vw;
	color: #222222;
	margin-left: 5vw;
}

.w-rounded-box p{
	color: #222222;
	margin: 0.5vw 5vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
	color: #222222;
}
.w-rounded-box {
  width: 80vw;
  height: auto;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
	border: #707070 1px solid;
	padding: 2vw 1vw;
	margin-left: 10vw;
	margin-top: 1vw;
	margin-bottom: 5vw;
}

.JWP img{
	width: 60vw;
	margin-left: 10vw;
	margin-top: 1vw;
	margin-bottom: 1vw;
}


.Cording h3{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 3vw;
	color: #222222;
	margin-left: 5vw;
}

/*-------3.おすすめの業者----*/
.c-title{
	font-family: "myfont", sans-serif;
	font-weight: bold;
	font-size: 3.5vw;
	margin-left: 10vw;
	margin-top: 5vw;
}

.c-img{
	width: 70vw;
	margin-left: 15vw;
	margin-top: 1vw;
}

.url{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	margin-left: 15vw;
	font-size: 2.5vw;
}

.NOREN a{
	text-decoration: none;
	color: blue;
}

.hirogare a{
	text-decoration: none;
	color: blue;
}

.hpranger a{
	text-decoration: none;
	color: blue;
}

.realize a{
	text-decoration: none;
	color: blue;
}

.saitoya a{
	text-decoration: none;
	color: blue;
}

.look a{
	text-decoration: none;
	color: blue;
}

.hpcom a{
	text-decoration: none;
	color: blue;
}

.sasajima a{
	text-decoration: none;
	color: blue;
}

.tmp a{
	text-decoration: none;
	color: blue;
}


.p-rounded-box p{
	color: #fff;
	margin: 1.5vw 1vw;
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
}
.p-rounded-box {
  width: 80vw;
  height: auto;
  border-radius: 15px;
  background-color: #F7B0B0;
  justify-content: center;
  align-items: center;
	padding: 1.5vw 1vw;
	margin-left: 10vw;
	margin-top: 3vw;
}


.info{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	margin-left: 15vw;
	margin-top: 3vw;
	margin-bottom: 10vw;
}









/*-------4.まとめ----*/
.summary p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 5vw;
	color: #222222;
	margin-left: 5vw;
	margin-right: 5vw;
	margin-top: 15vw;
}









.copy-url-message {
  display: block;
  text-align: center;
  margin-top: 5px;
  color: green;
}

.hide {
  display: none;
}


/*-------フッター前----*/
.heading-16 {
font-family: "myfont", sans-serif;
	font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222222;
	font-size: 2vw;
	margin-top: 5vw;
}

.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #f7b0b0;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

.container {
    display: flex;
	margin-left: 5vw;
	margin-right: 5vw;
    justify-content: space-around; /* 画像の間に均等に余白を設定 */
}
.container img {
    width: 28vw; /* 画像が3つ並ぶように設定 */
    height: 7.1vw; /* 高さを幅に揃える */
    object-fit: cover; /* 画像がコンテナを埋めるように調整 */
}


.hpranger_cp {
	position: relative;
	margin-left: 15vw;
	margin-top: 10vw;
}

.bg_cp{
	display: none;
}
	
.bg_cp_sp{
	display: block;
	position: absolute;
	width: 70vw;
}
.hplogo{
	position: absolute;
	top: 7vw;
	left: 16vw;
	display: block;
	width: 40vw;
}

.cp_title{
	position: absolute;
	top: 22vw;
	left: 5vw;
	width: 60vw;
}

.hpranger_cp p{
	font-family: "myfont", sans-serif;
	font-weight: normal;
	
}

.cp_info{
	position: absolute;
	top: 34vw;
	left: 7vw;
	right: 20vw;
	font-size: 3vw;
}
.request-contact{
	position: absolute;
	top: 65vw;
	left: 18vw;
	right: 18vw;
	font-size: 2vw;
}

.request{
	display: none;
}
.request-sp{
	display: block;
	position: absolute;
	width: 50vw;
	top: 70vw;
	left: 10vw;
}

.contact{
	display: none;
}	
	
.contact-sp{
	display: block;
	position: absolute;
	width: 50vw;
	top: 85vw;
	left: 10vw;
}


/*-----フッター-------*/
/*Contact*/

.contactbox {
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 2vw;
	margin-top: 130vw;
	margin-left: 20vw;
	margin-bottom: 10%;
	padding: 3%;
border: #000000 1px solid; /*境界線の指定*/
width:60vw;
text-align: center;
}

	.contactbox img{
		width: 30vw;
	}

/*運営元*/
.company{
	display: flex;
  justify-content: center;
	margin-bottom: 2%;
	font-size: 2vw;
}
.company .company-img, .company-3steps{/*画像と3段を横並びに*/
	display: inline-block;
    vertical-align: top;

}

.company-img{
	width: 13vw;
}


.company-3steps{
	margin-left: 2%;
}

.company01{
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
}

.company02 li{/*横並びに*/
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
	display: inline-block;
    vertical-align: top;
	
}

.company02 li+ li {/*隣との間の縦線*/
  border-left: 1px solid #333;
  padding: 0 10px;
}

.company03 li{
	font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
	
	display: inline-block;
    vertical-align: top;
	margin-top: 4%;
	margin-right: 4%;
}

/* copyright */
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #48483A;
  text-align: center;
  background: #F7B0B0;
}

.footer-copyright a {
  text-decoration: none;
  color: #48483A;
}

}