html{
 scroll-behavior: smooth;
}
#contents{
 width: 460px;
 margin: 0 auto;
}
p{
 font-size: 16px;
 color: #333;
}
h2:not(.service-box){
 text-align: center;
 color: #fff;
 font-size: 26px;
 background: #F68F19;
 border: none;
 padding: 8px 0;
 margin: 0 0 30px 0;
}
h3{
 font-size: 20px;
 color: #53392B;
 font-weight: bold;
}
 #reason img, #request img, #cost-text{
 background: #fff;
 border-radius: 5px;
 box-shadow: 0px 5px 15px 0px rgb(0, 0, 0, 0.15);
}
#contents #resolution, #contents #about, #contents #work, #contents #cost, #contents #contents-btn, #contents #faq, #contents #request{
 margin-bottom: 100px;
}
.org{
 color: #F68F19;
}
/*===design-service-top（ファーストビュー）===*/
h1{
 color: #F68F19;
 font-size: 35px;
 line-height: 45px;
 border-top: solid #53392B 3px;
 border-bottom: solid #53392B 3px;
 position: absolute;
 top: 35px;
 padding: 30px 55px 15px 55px;
}
#h1-box{
 height: 320px; /*==キャンペーン外==*/
 /*height: 500px;==キャンペーン中==*/
 background: #fff;
 border-radius: 5px;
 box-shadow: 0px 5px 15px 0px rgb(0, 0, 0, 0.15);
 position: relative;
}
#h1-box p{
 color: #fff;
 background: #53392B;
 border-radius: 20px;
 padding: 5px 10px;
 position: absolute;
 letter-spacing: 0.1em;
 left: 9px;
 top: 20px;
 z-index: 1;
}
#text-box{
 text-align: center;
 margin: 35px 0 60px;
}
#text-box p:first-child{
 color: #53392B;
 font-size: 23px;
 line-height: 1.4;
 font-weight: bold;
 margin-bottom: 15px;
}
#text-box p:last-child{
 width: 400px;
 margin: 0 auto;
}
#design-service-top{
 margin-bottom: 100px;
}
#design-service-top .loop_Slide {
 position: absolute;
 top: 200px;/*==キャンペーン外==*/
 /*top: 380px;==キャンペーン中==*/
 display: flex;
 width: 460px;
 overflow: hidden;
 height: 100px;
}
#design-service-top .loop_Slide ul {
 padding: 0;
 display: flex;
 flex-shrink: 0;
 position: absolute;
}
#design-service-top .loop_Slide ul li {
 display: inline-block;
 margin-right: 20px;
 list-style: none;
 text-align: center;
}
#design-service-top .loop_Slide ul li img {
 display: block;
 width: 180px;
 height: auto;
 filter: drop-shadow(0px 0px 5px #c3c3c3);
}
 #design-service-top .loop_Slide li:last-child {
 padding-top: 30px;
}
/*=======キャンペーン=======
#h1-box .compain{
 position: absolute;
 top: 185px;
 left: 10px;
 width: 435px;
 height: 165px;
 background: #FFF7F7;
 border: solid #E23619 3px;
 border-radius: 5px;
}
#h1-box .compain p{
 background: none;
 font-size: 18px;
 color: #333;
}
#h1-box .compain p:first-of-type{
 color: #fff;
 background: #E23619;
 font-weight: bold;
 text-align:center;
 font-size: 20px;
 left: 0px;
 top: 0px;
 border-radius: 0;
 width: 435px;
 padding: 7px 0;
}
#h1-box .compain p:nth-of-type(2){
 top: 45px;
 left: 0;
 position: relative;
 text-align: center;
}
#h1-box .compain p:nth-of-type(2)::after{
 content: "↓";
 display: block;
 font-size: 30px;
}
#h1-box .compain p:last-of-type{
 position: relative;
 top: 60px;
 left: 0;
 text-align: center;
}
#h1-box .compain p:last-of-type span:first-child{
 position: absolute;
 top: -5px;
 line-height: 25px;
 width: 155px;
 text-align: center;
 color: #E23619;
 font-weight: bold;
 font-size: 18px;
}
#h1-box .compain p:last-of-type span:last-child{
 font-size: 45px;
 font-weight: bold;
 color: #E23619;
 margin-left: 10px;
}*/

/*===worries（デザイン制作のこんなお悩みございませんか？）===*/
#worries div{
 background: #f0f0f0;
 width: 440px;
 height: 420px;
 border-radius: 3px;
 box-shadow: 0px 5px 15px 0px rgb(0, 0, 0, 0.15);
 margin: 50px auto;
 position: relative;
}
#worries div:last-child{
 margin-bottom: 90px;
}
 #worries h2{
 border: none;
 color: #fff;
 background: #F68F19;
 border-radius: 50px;
 text-align: center;
 line-height: 1.5em;
 width: 390px;
 padding: 16px;
 font-size: 18px;
 margin: auto;
}
#worries h2::after{
 position: absolute;
 content: "";
 top: 98%;
 left: 195px;
 border: 15px solid transparent;
 border-top: 15px solid #F68F19;
}
.worries-box img{
 position: absolute;
 top: 75px;
 width: 440px;
 height: auto;
}
#worries h3, .worries-box p{
 position: absolute;
 text-align: center;
 }
#worries h3{
 font-size: 18px;
 width: 440px;
 top: 25px;
}
.worries-box p{
 top: 343px;
 width: 398px;
 left: 21px;
}

/*===resolution（こんなご依頼で解決できます！）===*/
#resolution h2{
 border: none;
 font-size: 20px;
 text-align: right;
 margin-bottom: 35px;
 padding: 0;
 line-height: 1.3;
 right: 15px;
 letter-spacing: 0.2em;
}
#resolution h2::before{
 content: "「";
 color: #F68F19;
 font-size: 45px;
 top: 5px;
}
#resolution h2::after{
 content: "」";
 color: #F68F19;
 font-size: 45px;
}
#resolution h2 span{
 font-weight: bold;
}
.big-text{
 font-size: 45px;
}
#resolution img{
 border-radius: 5px;
 box-shadow: 0px 5px 15px 0px rgb(0, 0, 0, 0.15);
 width: 460px;
 height: auto;
 margin-bottom: 10px;
}
#resolution .resolution-text img{
 width: 65px;
 height: auto;
}
.client img, .staff img{
 border-radius: 50%!important;
}
.staff img {
    position: absolute;
    right: 20px;
    top: 165px;
}
.client img {
    position: absolute;
    top: 55px;
    left: 20px;
}
#resolution .resolution-text {
 position: relative;
 height: 260px;
 margin-bottom: 25px;
}
.client p:first-child {
    position: absolute;
    left: 130px;
}
.staff p:first-child {
 position: absolute;
 top: 115px;
 right: 130px;
}
.client p:last-child, .staff p:last-child{
 position: absolute;
 width: 273px;
 padding: 10px 25px;
 font-size: 18px;
 color: #fff;
 font-weight: bold;
 text-align: center;
 line-height: 1.5em;
 border-radius: 50px;
}
.client p:last-child{
 background: #F68F19;
 left: 100px;
 top: 25px;
}
.client p:last-child::before{
 content: "";
 position: absolute;
 bottom: -13px;
 left: 5px;
 border-top: 20px solid #F68F19;
 border-left: 20px solid transparent;
 transform: rotate(-60deg);
}
.staff p:last-child{
 position: absolute;
 background: #FFB53D;
 right: 100px;
 top: 140px;
}
.staff p:last-child::after{
 content: "";
 position: absolute;
 bottom: -13px;
 right: 5px;
 border-top: 20px solid #FFB53D;
 border-left: 20px solid transparent;
 transform: rotate(-30deg);
}

/*===about（アースダンボールのデザイン制作サービスが選ばれる3つの理由）===*/
#about{
 text-align: center;
}
#about h2{
 border: none;
 font-size: 20px;
 padding: 0;
 background: linear-gradient(transparent 75%, #F68F19 0%);
 display: inline;
 bottom: 35px;
}
#about h3{
 background: #fff;
 position: absolute;
 line-height: 1;
 top: -27px;
 left: 100px;
 padding: 10px 18px 10px 30px;
 text-align: left;
 z-index: 1;
}
#about h3 span{
 background: #fff;
 font-size: 55px;
 font-weight: bold;
 position: absolute;
 padding: 10px;
 top: -6px;
 left: -65px;
 color: #F68F19;
 z-index: -1;
}
#about li{
 width: 400px;
 border: solid 5px #F68F19;
 border-radius: 10px;
 position: relative;
 margin: 0px auto 60px;
}
#about li:last-of-type{
 margin-bottom: 45px;
}
#about img{
 margin: 35px 20px 0;
}
#about p:not(.about-list){
 text-align: center;
 width: 315px;
 margin: 0 0 15px 47px;
}

/*==mirapuri==*/
#mirapuri{
 margin-bottom: 15px;
 box-shadow: 0px 0px 7px 2px rgb(0, 0, 0, 0.15);
 border-radius: 10px;
}
#mirapuri ul {
 padding: 25px 20px 10px;
}
#mirapuri li {
 width: 420px;
 border: none;
 box-shadow: 0px 0px 7px 2px rgb(0, 0, 0, 0.15);
 margin-bottom: 35px;
}
#mirapuri li p:first-of-type{
 font-size: 19px;
 font-weight: bold;
 display: block;
 text-align: left;
 color: #F68F19;
 padding: 15px 20px 5px;
 border-radius: 10px;
}
#mirapuri li p:last-of-type{
 width: auto;
 text-align: left;
 margin-bottom: 10px;
 padding: 0 20px 5px;
}
#mirapuri li p:first-of-type, #mirapuri li p:last-of-type{
 background-color:#fff;
 margin: 0;
}
#mirapuri li img{
 margin: auto;
 position: relative;
 top: 7px;
 border-radius: 0 0 10px 10px;
 width: 420px;
 height: auto;
}
#mirapuri summary img{
 width: 135px;
 height: auto;
 margin: 0px 10px;
 position: relative;
 top: 10px; 
}
#mirapuri summary {
 display: block;
 justify-content: space-between;
 align-items: center;
 position: relative;
 padding: 15px 0;
 background-position: right calc(2em - 7px) center;
 background-size: 22px;
 background-repeat: no-repeat;
 background-color: #f4f4f4;
 color: #53392B;
 font-weight: bold;
 font-size: 20px;
 cursor: pointer;
 border-radius: 10px;
}
#mirapuri summary::-webkit-details-marker {
 display: none;
}
#mirapuri summary::before, #mirapuri summary::after {
 position: absolute;
 right: calc(2em + 2.5px);
 width: 3px;
 height: 20px;
 border-radius: 5px;
 background-color: #53392B;
 content: '';
 top: 50px;
}
#mirapuri summary::before {
 rotate: 90deg;
}
#mirapuri[open] summary{
 border-radius: 10px 10px 0 0;
}
#mirapuri[open] summary::after {
 rotate: 90deg;
}
#mirapuri summary::after {
 transition: rotate .3s;
}
#mirapuri[open] p {
 transform: none;
 opacity: 1;
}


/*===contents-btn（サイト内リンクボタン）===*/
#contents-btn li{
 background: #fff;
 border: solid 1px #c4c4c4;
 box-shadow: 0px 3px 6px 0px rgb(0, 0, 0, 0.1);
 color: #53392B;
 border-radius: 5px;
 position: relative;
 margin: 20px auto;
 padding-left: 112px;
 font-size: 20px;
 font-weight: bold;
 line-height: 4;
}
#contents-btn li a{
 display: block;
 font-size: 18px;
 font-weight: bold;
 color: #53392B;
}
#contents-btn li::after{
 content: '';
 width: 15px;
 height: 15px;
 border-top: solid 2px #53392B;
 border-right: solid 2px #53392B;
 transform: rotate(135deg);
 position: absolute;
 top: 25px;
 right: 30px;
}
#contents-btn img{
 position: absolute;
 top: 14px;
 left: 30px;
}

/*===work（デザイン制作事例）===*/
#work h3{
 padding-left: 10px;
}
#work h3::before{
 content: "";
 display: block;
 width: 11px;
 height: 27px;
 border-radius: 3px;
 background: #F68F19;
 position: absolute;
 left: -7px;
 top: 0;
 bottom: 0;
 margin: auto;
}
#work h3, #work p{
 margin: 10px 5px 10px;
}
#work ul{
 background: #f0f0f0;
 height: 250px;
 width: 460px;
 overflow-y: hidden;
 overflow-x: scroll;
 box-shadow: 0px 3px 6px 0px rgb(0, 0, 0, 0.15);
 margin-bottom: 50px;
 display: flex;
}
#work li{
 padding: 25px;
}
#work .work_list4 li:last-child{
 padding-top: 25px;
}
#work picture{
 filter: drop-shadow(0px 0px 5px #c3c3c3);
}
#work img{
 width: auto;
 height: 200px;
}
.pu {
 box-shadow: 0 0 0 9999px rgb(0 0 0.5 / 60%);
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 z-index: 3;
 width: 400px;
 height: 200px;
 padding: 25px;
 background: #fff;
 transition: 0.5s;
 border-radius: 10px;
}
#pu-on, #pu-on2, #pu-on3, #pu-on4, #pu-on5, #pu-on6, #pu-on7, #pu-on8, #pu-on9, #pu-on10, #pu-on11, #pu-on12, #pu-on13, #pu-on14, #pu-on15, #pu-on16{
 display: none;
}
#pu-on:checked + .pu, #pu-on2:checked + .pu, #pu-on3:checked + .pu, #pu-on4:checked + .pu, #pu-on5:checked + .pu, #pu-on6:checked + .pu, #pu-on7:checked + .pu, #pu-on8:checked + .pu, #pu-on9:checked + .pu, #pu-on10:checked + .pu, 
#pu-on11:checked + .pu, #pu-on12:checked + .pu, #pu-on13:checked + .pu, #pu-on14:checked + .pu, #pu-on15:checked + .pu, #pu-on16:checked + .pu{
 display: block;
}
.icon-close{
 position: absolute;
 top: -45px;
 right: 0px;
 font-size: 62px;
 cursor: pointer;
 color: #fff;
}

/*===cost（デザイン費用について）===*/
#cost-text{
 padding: 35px;
}

#cost p:first-child{
 font-weight: bold;
 color: #E23619;
 font-size: 16px;
 border-bottom: solid #E23619 5px;
 margin-bottom: 25px;
 line-height: 25px;
 padding-bottom: 5px;
}
#cost span{
 font-size: 45px;
 font-weight: bold;
 display: block;
}

#cost li{
 font-size: 16px;
 margin: 15px 0 0 1em;
 text-indent:-1em;
}
/*先着30社限定 0円キャンペーン
#campaign {
 margin-bottom: 30px;
 border: solid #E23619 5px;
 background-color: #FFF7F7;
 border-radius: 10px;
	padding: 0 0 30px 0;
}
#campaign h3 {
 text-align: center;
 font-size: 23px;
 color: #fff;
 background-color: #E23619;
 line-height: 50px;
	margin-bottom: 30px;
}
#u_cost, #c_cost {
	font-size: 20px;
	position: relative;
	text-align: center;
}
#u_cost {
	margin-bottom: 35px;
}
#u_cost span, #c_cost span {
	font-weight: bold;
	font-size: 30px;
	margin-left: 20px;
}
#u_cost::after {
	content: '↓';
	display: block;
	font-size: 30px;
	margin-top: 10px;
}
#c_cost span:first-child {
	position: absolute;
	top: -20px;
	left: 45px;
	color: #fff;
	font-size: 18px;
	background-color: #E23619;
 border-radius: 5px;
	line-height: 30px;
	text-align: center;
	margin: 0;
	width: 160px;
}
#c_cost span:last-child {
	color: #E23619;
	font-size: 70px;
}*/

/*===request（ご依頼の流れ）===*/
#request{
 position: relative;
 margin-bottom: 130px;
}
#request h3{
 margin:0 0 10px 125px;
 height: 55px;
 line-height:55px;
}
#request li{
 width: 290px;
 margin: 45px auto;
 position: relative;
}
#request img{
margin: 0 0 10px 0;
}
#request .item{
 font-size: 20px;
 display: inline-block;
 padding: 16px 32px 8px 16px;
 position: absolute;
 color: #fff;
 z-index: 1;
}
#request .item::after{
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;  
 left: 5px;
 z-index: -1; 
 background: #53392B;
 transform: scaleY(1.3) perspective(0.6em) rotateX(4deg);
 transform-origin: bottom left;
}
#request .item span{
 font-weight: bold;
 font-size: 40px;
}
#request .button{
 width: 400px;
 height: 58px;
 margin: 30px auto;
}
#request .button-brown::after{
 content: '';
 width: 10px;
 height: 10px;
 border: 0px;
 border-top: solid 2px #fff;
 border-right: solid 2px #fff;
 -ms-transform: rotate(135deg);
 -webkit-transform: rotate(135deg);
 transform: rotate(135deg);
 position: absolute;
 top: 16px;
 right: 40px;
}

/*===faq（よくある質問）===*/
.qa{
  margin-bottom: 15px;
  box-shadow: 0px 0px 7px 2px rgb(0, 0, 0, 0.15);
  border-radius: 5px;
}
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 15px 90px 15px 20px;;
  background-position: right calc(2em - 7px) center;
  background-size: 22px;
  background-repeat: no-repeat;
  color: #53392B;
  font-weight: bold;
  cursor: pointer;
}
.qa summary::-webkit-details-marker {
  display: none;
}
.qa summary::before,
.qa summary::after {
  position: absolute;
  right: calc(2em + 2.5px);
  width: 3px;
  height: 20px;
  border-radius: 5px;
  background-color: #53392B;
  content: '';
}
.qa summary::before {
  rotate: 90deg;
}
.qa summary::after {
  transition: rotate .3s;
}
.qa[open] summary::after {
  rotate: 90deg;
}
.qa p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 0 2em 1.5em;
  color: #050505;
  transition: transform .5s, opacity .5s;
}
.qa[open] p {
  transform: none;
  opacity: 1;
}

.qa th, .qa td{
  padding: 6px 6px;
  border: 1px solid #C4C4C4;
  color: #333;
  font-size: 14px;
  vertical-align: middle;
  line-height: 1.4;
  font-weight: normal;
}
.qa th{
 background: #f0f0f0;
 width: 95px;
}
.qa .printing td{
 background: #f0f0f0;
 width: 260px;
}
#faq .printing{
 background: #f0f0f0;
 text-align: center;
 font-weight: bold;
}
#faq table{
 border-collapse: collapse;
 margin: auto 15px 15px;
}

/*===info（お問い合わせ・ご依頼）===*/
#telnumber{
 position: relative;
 margin: 40px auto 0;
 text-align: center;
}
#info .button-brown{
 position: static;
 margin: 50px auto 0;
}
#telnumber a{
 color: #53392B;
 font-size: 45px;
 line-height: 40px;
 padding-left: 60px;
 font-weight: bold;
 background: url(/img/inquiry-icon-tel.png) no-repeat;
 background-size: 50px;
 background-position-y: 3px;
}
#telnumber span{
 font-size: 16px;
 font-weight: bold;
 color: #53392B;
 display: block;
}
#form-box{
 background: #f0f0f0;
 padding: 20px;
 margin: 30px auto 0;
}
#form-box h3{
 text-align: center;
 font-size: 22px;
 margin-bottom: 30px;
}
#form-box p {
 text-align: center;
}
#form-box p span {
 color: #E23619;
 font-weight: bold;
}
#form-box table {
 text-align: left;
 border-spacing: 0;
}
#form-box tr {
 margin-bottom: 30px;
 display: block;
}
#form-box td {
 display: block;
 font-size: 16px;
 font-weight: bold;
 color: #53392B;
}
#file #error {
 color: #E23619;
 margin-top: 10px!important;
}
#form-box .info_titile {
 margin-bottom: 10px;
}
#form-box .info_titile span {
 color: #E23619;
}
#form-box td input, #form-box td textarea, #form-box td select {
 font-size: 16px;
 border: solid 1px #C4C4C4;
 border-radius: 5px;
 padding: 5px 10px;
 height: 40px;
 width: 400px;
}
#form-box td textarea {
 resize: vertical;
 padding: 10px;
 height: 150px;
 line-height: 1.5;
}
#form-box td select {
 width: 250px;
 height: 50px;
}
#form-box input::placeholder, #form-box textarea::placeholder {
 color: #C4C4C4;
}
#input_quantity {
 width: 230px;
 margin-right: 10px;
}
#form-box #printData {
 background: #fff;
 border: dashed #c4c4c4 1px;
 padding: 15px 10px;
 text-align: center;
 height: auto;
 margin-top: 10px;
}
#form-box td .inputS {
 width: 60px;
 margin: 0 10px;
 text-align: center;
}
#form-box p {
 text-align: left;
}