@charset "UTF-8";
 *{
   box-sizing: border-box;
}

/* 上に戻るボタン */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
	.pagetop:hover, .pagetop:hover .pagetop__arrow {
		border-color: #619f60;
    }
}

/* 途中で止まるメニューバー */
#global-nav {
	background-color:rgba(235,234,239,1.00);
	width: 100%;
}

#global-nav.m_fixed {
	left: 0;
	position: fixed;
	top: 0;
}

.tp-menu03 {
	padding-bottom: 0;
	padding-top: 0;
	margin: .5rem auto 0;
	max-width: 100%;
	padding: 1rem 0;
	width: 768px;
}

.global-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.global-item {
	width: 18%;
	margin: 0 .2rem;
}

.global-item a {
	background-color:rgba(235,234,239,1.00);
	color: #233853;
	font-weight: bold;
	display: block;
	line-height: 50px;
	text-align: center;
	border: solid 2px #233853;
	border-radius: 30px;
}

.global-item a:hover {
	background: #fff;
}

/* 各ページのアイキャッチ */
.ttl {background: url("images/service-01.jpg");}
.DTI {background: url("images/service-02.jpg");}
.caption {background: url("images/service-03.jpg");}
.translation {background: url("images/service-04.jpg");}

.ttl,.DTI,.caption,.translation,.TTL-faq {
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	width: 100%;
	margin-bottom: .8rem;
}

.touka {
	background-color: rgba(0,0,0,0.4);
	width: 100%;
}

.ttl h1, .DTI h1, .caption h1, .translation h1{
	font-size: 3em;
	font-weight: bold;
	padding: 0.8em;
	max-width: 400px;
	border:4px double #619f60;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
	background: rgba(255,255,255,0.6);
	margin:1rem auto;
}

.ttl p, .DTI p, .caption p,.translation p {
	color: #fff;
	font-size: 1.2em;
	font-weight:bolder;
	padding: 1rem;
}

.ttl span, .DTI span, .caption span, .translation span, .op-title span {
	display: inline-block;
}

/* テープおこしメニュー */
#tp-menu {
	padding-top: 70px;
	margin-top: -70px;
}

.tp-menu {
	display: flex;
	justify-content: space-around;
	align-items: top;
	background: linear-gradient(-80deg,#eceded 0%,#eceded 55%, #fff 55%,#fff 56%,#f8f8f6 56%, #f8f8f6 100%);
}

.tp-menu01,.tp-menu02{
	width:400px;
	padding: 2rem 1rem 1rem;
}

.tp-menu01 p {
	color:rgba(10,10,10,0.75);
	text-align: left;
	font-size: 1.8rem;
	font-weight: bold;
}

.tp-menu02 p {
	color:rgba(10,10,10,0.75);
	text-align: right;
	font-size: 1.8rem;
	font-weight: bold;
	padding-right: 1.5rem;
}

.line{
	display: block;
	text-align: left;
	padding-left: 0;
}

.line li {
	width: 90%;
	border-bottom: solid 1px rgba(135,135,135,1.00);
	padding:.4rem 0;
}

#menu01,#menu02,#menu03,#menu04,#option,#TTL-nouhin,#TTL-QA {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 40px;
	margin-top: -40px;
}

#op01,#op02,#op03,#op4,#op05,#op06 {
	padding-top: 80px;
	margin-top: -80px;
}

/* プランタイトル〜プランの説明 */
.plan h2,.tp-option h2 ,.TTL-faq h2 {
	width:100%;
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	border-top: 4px double #8c8b8b;
	padding-top: 2.5rem;
}

.plan {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

.plan01 {
	width: 100%;
	margin: 2rem auto;
}

.plan01 span {
	color:#2c4667;
	padding: 0 .25rem;
	font-weight: bold;
}

.plan02 {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.plan02 span {
	font-size:1.2rem;
	padding: 0 .25rem;
	font-weight: bold;
	display: inline-block;
}

.plan03 {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}

.plan03 details {
	background-color: #2c4667;
}

.plan03 summary {
	color: #FFFFFF;
	padding: 1rem 0.5rem;
	cursor:pointer;
	}

.plan03 details div {
	background-color: #FFFFFF;
	border:  1px solid #2c4667;
	padding: 1rem 2rem;
	text-align: left;
}

.plan03.info {
	border: 1px solid #2c4667;
	margin-bottom:2rem;
}

/* 料金表部分 */
.kakaku {
	width:80%;
	max-width: 1000px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	align-items: center;
	min-width: 0;
	padding: 1rem;
	border:  1px solid #717171;
	margin-top: 1em;
}

.kakaku span{
	font-size:1.2rem;
	font-weight: bold;
}

.Kspace1 {grid-column: 1 / 3;}
.Kspace2 {grid-column: 3 / 5;}
.Kspace3 {grid-column: 5 / 7;}
.Kspace4 {grid-column: 1 / 4;}
.Kspace5 {grid-column: 4 / 7;}

.Kspace1,.Kspace2,.Kspace3{
	margin:0.3rem 0;
	padding: 0.5rem;
}

.Kspace1+.Kspace2, .Kspace2+.Kspace3, .Kspace4+.Kspace5{
	border-left: 1px solid #717171;} 

.Kspace4+.Kspace4{
	border-bottom: 1px solid #717171;	
}

.Kinfo1 {
	grid-column: 1 / 7;
	font-size:0.8rem;
	margin:0.3rem;
	border-bottom: 1px solid #717171;
	padding: .5rem;
}

.Kinfo2-1 {
	grid-column: 1 / 3;
	text-align: center;
	margin-top:.5rem;
	padding: .5rem;
}

.Kinfo2-2 {
	grid-column: 3 / 7;
	text-align: left;
	margin-top:.5rem;
	padding: .5rem .5rem .5rem 1rem;
}

.Kinfo2-1+.Kinfo2-2 {
	border-left: 1px solid #717171;
} 


/* オプションメニュー、DTIのラインナップ設定*/
.op-plan {
	max-width: 1000px;
	margin:1rem auto;
	display:grid;
	align-items: stretch;
	grid-template-columns: 2fr 3fr;
	grid-template-rows: auto;
	border: 1px solid #717171;
}

.op-img {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	align-self: center;
}
.op-img img {
	max-width: 100%;
	vertical-align: bottom;
}

.op-title {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	text-align: left;
	font-weight: bold;
	font-size: 1.2rem;
	border-bottom: 1px solid #717171;
	padding: 0.5rem 1rem;
}

.op-explain {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	text-align: left;
	margin:0 auto;
	padding:1rem 1rem 0;
}

.op-kakaku {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
	background: #2c4667;
	color: #FFFFFF;
}

.op-kakaku summary {
	padding: 1rem 0.5rem;
	cursor:pointer;
}

.op-Kdetail {
	background-color: #FFF;
	color: #000;
	padding: .5rem;
}

.op-Kdetail caption {
	background-color: #ff9900;
	padding: 0.5rem;
	border: 1px solid #717171;
	border-bottom: none;
}
.op-Kdetail table {
	border-collapse: collapse;
	margin: 1rem;
	padding: 0;
	table-layout: fixed;
}

.op-Kdetail table tr {
	background-color: #fff;
	border-bottom: 1px solid #717171;
	padding: 0.35rem;
	border: 1px solid #717171;
}

.op-Kdetail table th, .op-Kdetail table td {
	padding: 1rem 10px 1rem 1rem;
	border-right: 1px solid #717171;
}

.op-Kdetail span {
	padding-bottom: 1rem;
	text-align: left;
}

.op-Kdetail table th { width:20%;}
.op-Kdetail .price {	width:40%; }
.op-Kdetail .txt {
	width:40%;
	text-align: left;
	font-size: 0.85rem;
}

.gray { color:#3f3f3f; }

.marker-yellow {
	background: linear-gradient(#fff 60%, #fff9c9 0%);
}

/* 納品の流れエリア */
.faq-area1{
	background-color: #FFFFFF;
	width:80%;
	max-width: 1000px;
	padding: 0 1rem 1rem;
	margin:0 auto;
	justify-content: center;
}

.faq-flow {
	max-width: 750px;
	margin: 1rem auto;
	padding: 1rem;
	display:grid;
	align-items: stretch;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: auto;
	border: 2px solid #F88400;
	border-radius: 20px;
}

.faq-icon{
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	align-self: center;
	color: #fff;
	background: #F88400;
	padding: 10px;
	margin-bottom: 10px;
	display: block;
	border-radius: 20px;
}

.faq-title{
	grid-column: 1 / 2;
	grid-row: 2 / 7;
	align-self: flex-start;
	font-weight: bolder;
}

.faq-explain {
	grid-column: 2 / 3;
	grid-row: 1 / 7;
	text-align: left;
	padding-left: 1.5rem;
}

.faq-explain dt {
	margin: .2rem;
	padding: .7rem;
	background-color: #E6E4E0;
	border-radius: 20px;
}

.faq-explain dd {
	margin: .5rem 0rem 1rem 1rem;
}

.faq-explain div {
	margin: 0 0 .5rem .5rem;
	max-width: 95%;
}

.faq-explain a {
	color: #F88400;
}

.faq-area1 details {
	background-color: #eceded;
	margin-bottom: .5rem;
}
.faq-area1 summary {
	color: #3A3A3A;
	padding: 1rem 0.5rem 1rem 1rem;
	cursor:pointer;
	text-align: left;
	font-size: 1.1rem;
	}

 .faq-area1 details div {
	background-color: #FFFFFF;
	border:  1px solid #2c4667;
	padding: 1rem 2rem;
	text-align: left;
}

.faq-area1 a {
	color:#000B8F;
}

.faq-area1 h3 {
	font-weight: bold;
	font-size: 1.2rem;
	margin-bottom: 0rem;
}

.waku {
	padding: 0.5em 1em;
    margin: 2rem 1rem 2rem 5rem;
	line-height:1.5;
    border: solid 3px #eceded;/*線*/
    border-radius: 10px;/*角の丸み*/
}


 /* タブレット対応　横幅800px */
@media screen and (max-width: 590px){
		.tp-menu01 p,.tp-menu02 p {
		font-size:1.4rem;
		padding: 0;}
} 
	
 /* スマホ対応　横幅450px */
@media screen and (max-width: 450px) {
	.tp-menu01{padding: .5rem .8rem 0rem 1rem;}
	.tp-menu02{padding: .5rem 0rem 0rem;}
	.tp-menu01 p,.tp-menu02 p {
		font-size:1.2rem;
		padding: 0;}
	.tp-menu02 .line li {font-size:.85rem;}
	.ttl h1 {padding: 0.3em;
		width:auto;}
	.plan h2,.tp-option h2 {
		font-size: 1.5rem;
		border-top: 2px double #8c8b8b;}
	.plan01 {margin: 0 auto;}
	.plan03 {width: 100%;}
	.plan03 details div , .faq-area1 details {padding: 1rem .3rem;}
	.kakaku {width:90%;
		display: block;	}
	.Kspace1 + .Kspace2, .Kspace2 + .Kspace3,.Kspace4+.Kspace5,.Kinfo2-1  + .Kinfo2-2{border-left: none;} 
	.Kspace1,.Kspace2,.Kspace3,.Kspace4,.Kspace5 {
		border-bottom: 0.5px dotted #717171;
		padding:0;}
	.Kinfo2-1 {	margin-top:.3rem;
		padding: .3rem;}
	.Kinfo2-2{border-bottom: 0.5px dotted #717171;
		text-align: center;
		margin-top:0rem;
		padding: .5rem;}
	.op-plan {display:block;
		width:90%;}
	.op-img { display: none; }
	.op-kakaku p { padding: 0.5rem; }
	.op-kakaku table {
		border: 0;
		width:90%;
		margin: 0 auto;	}
	.op-kakaku caption {margin: 1rem auto 0;}
	.op-kakaku tr { display: block; }
	.op-kakaku th {
		background-color: #eee;
		display: block;
		border-right: none;}
	.op-kakaku td {
		display: block;
		border-bottom: 1px solid #717171;
		border-right: none;}
	.op-Kdetail {padding: 0rem;}
	.skip-button { width:95%;}
}

.soon {
	padding: 20px 1px;
	margin: .5rem auto;
}

.soon a {
	cursor:pointer;
	font-size: 1.5rem;
}