@charset "utf-8";

/* Flude Image */
img { max-width : 100%;}



@media screen and (min-width: 768px) {
    #contents #main {
        width: 100%!important;
	    margin: 0%;
    }
}

/* font */
// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.line-seed-jp-thin {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.line-seed-jp-regular {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.line-seed-jp-bold {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.line-seed-jp-extrabold {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 800;
  font-style: normal;
}


#contents{ width:100%; }
.container, .container-fluid{
    --bs-gutter-x: 0!important;
}

nav ul{margin-bottom:0;}

nav{ margin-bottom:0;
	line-height:1;
}

#putio-fv h2{
	padding-top:5vw;
}
#putio-fv h2 span{
	display:block;
	font-weight:normal;
	font-size:0.6em;
}

#putio-fv{
	background-color:#e4f4fd;
	height: 75vw;
}
#putio-fv .text-center.fs-1{
	color:#0736ad;
	padding-top: 2rem;
	letter-spacing:0.2em;
	margin-bottom: 100px;
}
#putio-fv .mx-auto.d-block{
	margin-bottom: 100px;
}

#putio-fv img.copy1 {
	top:35%;
	left: 12%;
}

#putio-fv img.copy2 {
	top:38%;
	right: 22%;
}

#putio-fv img.copy3 {
	top:75%;
	left: 18%;
}

#putio-fv img.copy4 {
	top:65%;
	right: 10%;
}

#putio-fv img.copy5 {
	bottom:10%;
	right: 43%;
}


#putio-price .col-1 span{
	color:#0736ad;
	font-size: 4rem!important;
	font-weight: bold;
	text-align: center;
}

#putio-price .col-4 p{
	text-align:center;
	color:#0736ad;
	font-size: 1.4rem!important;
	font-weight: bold;
}

#putio-price .price-title{
	display:block;
	margin-bottom:-20px;
}

#putio-price .price-text{
  font-weight: 850;
  font-size: 80px;
  float:left;
  text-align: right;
  margin-left: 5rem;

}

#putio-price .col-4:nth-of-type(4) .price-text{
  margin-left: 10rem;
}



#putio-price .price-tax{
	display:block;
	margin-top:-60px;
}

#putio-price .price-yen{
	display:block;
	margin-top:60px;
}

#putio-free{
	width:98%;
	margin:0 auto;
}

.service__ttl {
    position: relative;
    text-align: center;
    display: block;
    width: fit-content;
    line-height: 1.2;
    margin: 3rem auto -4rem; /*1rem auto 0.5rem;*/
    padding: 0 2rem;
}
.service__ttl__main {
    font-size: 1.2rem;
    font-weight: bold;
}
.service__ttl__sub {
    display: block;
    font-size: 0.9rem;
    font-weight: lighter;
}
.service__ttl::before, .service__ttl::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 2rem;
    background: rgba(0, 0, 0, 0.4);
}
.service__ttl::before {
    transform: rotate(-30deg);
    left: 0;
}
.service__ttl::after {
    transform: rotate(30deg);
    right: 0;
}


#putio-free ul{
	list-style:none;
	padding-left: 0;
}

#putio-free ul .col-3{
	width: 23%;
}

#putio-free ul .col-3 figcaption{
	color:#0736ad;
}

#putio-smart{
	background:#e4f4fd url(../images/putio-smart-bg.png) repeat-x bottom;
	 background-size:cover;
	 min-height:120vh;
	 max-height:200vh;
}

#putio-smart .text-center.fs-1{
	color:#0736ad;
	padding-top: 6rem;
	letter-spacing:0.2em;
	margin-bottom: 6rem;
}

#putio-smart .row .col-5{
	background:#fff;
	padding: 2rem;
	border-radius:15px;
	margin-bottom:2rem;
}
#putio-smart .row .col-5:nth-child(2n){
	margin-left: 2rem;
}

#putio-smart .row h4{
	font-size: 1.3rem;
	border-bottom: 1px solid #000;
	padding-bottom: 0.5rem;
}
#putio-smart .row p{
	font-size: 1.1rem!important;
}
#putio-smart .row .orange{
	color: var(--bs-orange);
}

#putio-regist .col-5{
	border: solid 1px #0736ad;
	padding: 2rem;
	margin-bottom: 2rem;
}

#putio-regist .col-5:nth-child(2n){
	margin-left:2rem;
}

#putio-regist .text-center.fs-1{
	color:#0736ad;
	padding-top: 6rem;
	letter-spacing:0.2em;
	margin-bottom: 6rem;
}

#putio-regist .special{
	color:#0736ad;
	font-size:1.25em!important;
	font-weight: bold;
}

#putio-regist .price{
		font-size:2em!important;
	font-weight: bold;
	text-align: center;
}
#putio-regist .price span{
		font-size:0.5em!important;
}
#putio-regist row.justify-content-center.fw-semibold span{
		font-size:0.5em!important;
}

#putio-regist .row.justify-content-center.fw-semibold .col-4{
	display:block;
	background-color:#DAD1B0;
	border-radius:15px;
	text-align: center;
}

#putio-regist .row.justify-content-center.fw-semibold .col-4:nth-child(1){
	padding-top:1vw;
}

#putio-regist .row.justify-content-center.fw-semibold .col-1{
	padding-top: 2vh;
}
#contents a,
#contents a:hover {
    color: #fff;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
  margin:0 auto;
  display:block;
  width:90%;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #ff812a;
}

a.btn--radius {
   border-radius: 100vh;
}

@media screen and (max-width: 767px) {
ul{ padding-left:0!important;}

    #contents #main {
        width: 100%!important;
	    margin: 0%;
    }
	#putio-fv {
        background: #e4f4fd url(../images/putio-fv-sp.png) no-repeat;
        background-size: cover;

  		min-height: 700px;
        background-position: 0 100px;
		/*min-height:134vh;
	    max-height: 150vh;
	    aspect-ratio : inherit;
	    height: auto;*/
	}
	#putio-fv .text-center.fs-1{
		padding-top: 1rem;
		margin-bottom: 3vw;
	}
		/*#putio-fv img.copy1 {
			top:20vh;
			width:35vw;
			left: 2%;
		}

		#putio-fv img.copy2 {
        top: 23vh;
        right: 1%;
        width: 25vw;
		}

		#putio-fv img.copy3 {
        top: 63vh;
        left: 1%;
        width: 30vw;
		}

		#putio-fv img.copy4 {
		top: 57vh;
        right: 1%;
        width: 33vw;
		}

		#putio-fv img.copy5 {
		top: 83vh;
        right: 43%;
        width: 25vw;
		}*/

		#putio-price .col-4 p{
			text-align:left;
			font-size: 0.9rem!important;
			font-weight: bold;
		}
		#putio-price .col-1 span{
			font-size: 2rem!important;
	        padding-top: 2vw;
	        display: inline-block;
		}
		.service__ttl {
		    margin: 2rem auto -0.5rem;
		}
		
		#putio-price .price-title{
			display:block;
			margin-bottom:0;
			font-size: 0.9rem;
		}
		#putio-price .price-text{
		  font-size: 30px;
		  float:left;
		  text-align: right;
		  margin-left:0;
		}

		#putio-price .col-4:nth-of-type(4) .price-text {
		    margin-left: 0;
		}
		#putio-price .price-tax{
			display:inline;
		}
		#putio-price .price-yen{
			display:inline-block;
			margin-top:15px;
		}
		#putio-free .col img{
			width: 15vw;
		}
		#putio-smart{
			 height: auto;
			 min-height:150vh;
			 max-height:290vh;
		}
		#putio-smart .text-center.fs-1{
			padding-top: 3rem;
			letter-spacing:0.1em;
			margin-bottom: 3rem;
		}
		#putio-smart .row .col-5{
			width: 90%;
			padding: 1.4rem;
			border-radius:15px;
			margin-bottom:1rem;
		}
		#putio-smart .row .col-5:nth-child(2n){
			margin-left: 0;
		}
		#putio-smart .row .col-5:last-child{
			margin-bottom:5rem;
		}
		#putio-regist .text-center.fs-1{
			padding-top: 3rem;
			letter-spacing:0.1em;
			margin-bottom: 3rem;
		}
		#putio-regist .col-5{
			padding: 1rem;
			margin-bottom: 1rem;
			width:90%;
		}
		#putio-regist .col-5:nth-child(2n){
			margin-left: 0;
		}
		#putio-regist .row.justify-content-center.fw-semibold .col-1{
			padding-top: 3vh;
		}
}