@charset "UTF-8";
/* 必須指定 */
#contWrap {
	margin: 0 auto;
	max-width: 1200px;
  min-width: 1020px;
	font-size: 18px;
	color: #333;
	background: url(../images/content_bg.png);
}
#contWrap img{
	width: 100%;
}
@media screen and (max-width: 750px)  {
	#contWrap {
		width: 100%;
    max-width: 100%;
    min-width: 100%;
    font-size: 14px;
	}
	#contWrap h2,
	#contWrap h3,
	#contWrap h3 span,
	#contWrap h4{
		font-size: 18px !important;
	}
	#contWrap p,
	#contWrap ul li{
		font-size: 14px !important;
	}
	#contWrap .flexWrap{
		display: block;
	}
	#contWrap .flexWrap > div{
		width: 100% !important;
		margin-bottom: 10px;
	}
}
/*共通*/
.flexWrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
/*TOP*/
#top > div > h2 {
	background: none;
}
#top > div > h2 img {
    width: 100%;
}
#top > div > h3 {
    text-align: center;
    font-weight: 600;
    font-size: 36px;
    color: #2BB9BA;
    margin:30px 0 10px 0;
}
#top > div > p {
    text-align: center;
    font-size: 20px;
    margin: 0;
}
/*お悩み*/
#onayami > div{
	width: 98%;
	margin: 50px auto 0 auto;
}
#onayami > div > div{
	width: 32.5%;
	background-color: #fff;
	border-radius: 10px;
	padding: 2%;
}
#onayami > div > div:nth-child(1){
	border: #f18f6f solid 2px;
}
#onayami > div > div:nth-child(2){
	border: #6ecbcc solid 2px;
}
#onayami > div > div:nth-child(3){
	border: #6bba2b solid 2px;
}
#onayami h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
		margin-bottom: 10px;
}
#onayami ul {
	justify-content: center;
	align-items: center;
	height: 220px;
	position: relative;
}
#onayami ul::after{
	content: '';
	display: inline-block;
	width: 50px;/*画像の幅*/
	height: 50px;/*画像の高さ*/
	background-image: url(../images/arrow.png);
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	left:calc(50% - 20px);
	bottom: -50px;
}
#onayami ul li {
    font-size: 18px;
		line-height: 1.5;
		padding: 6px 0 3px 0;
		list-style: disc;
		margin-left: 8%;
}
#onayami .onayamiBtn{
	background-color: #fff;
	border-radius: 10px;
	margin: 70px auto 50px auto;
	text-align: center;
}
#onayami .onayamiBtn p{
	background-color: #EB6438;
	padding: 5px;
	margin: 0 auto 20px auto;
	border-radius: 10px;
	border-bottom: solid 4px #af5538;
}
#onayami .onayamiBtn .tomei{
	background-color: #2BB9BA;
	border-bottom: solid 4px #277d7e;
}
#onayami .onayamiBtn .sonota{
	background-color: #6bba2b;
	border-bottom: solid 4px #517a30;
}
#onayami .onayamiBtn p a{
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
#onayami .onayamiBtn p:hover{
	opacity: 0.7;
}
#onayami .onayamiBtn > div{
	margin: 10px auto 20px auto;
}
/*オリジナルホワイトボード*/
#original-design{
	margin-top: 100px;
}
#original-design h2,
#tomei-board h2,
#sonota-board h2{
    font-size:24px;
    display: block;
    background-color: #EB6438;
    padding: 20px 5px;
    text-align: center;
    color: white;
    margin: 40px 0;
}
#tomei-board h2{
	background-color: #2BB9BA;
}
#sonota-board h2{
	background-color: #6bba2b;
}
#original-design h3{
	font-size: 30px;
	font-weight: 600;
	text-align: center;
	display: block;
	border-bottom: dotted 14px #ffd43d;
	width: 600px;
	margin: 0 auto 30px auto;
}
#original-design h3 .fs-42{
	font-size: 42px;
}
.textBox{
	width: 84%;
	margin: 0 auto 30px auto;
	text-align: center;
}
#original-design .flexWrap{
	width: 82%;
	margin: 40px auto 100px auto;
}
#original-design .set .flexWrap,
#original-design .type .flexWrap,
#original-design .voice .flexWrap{
	width: 98%;
}
#original-design .flexWrap > div{
	width: 24%;
}
#original-design .type .flexWrap div {
    width: 24.5%;
}
#original-design .type .flexWrap div p {
    text-align: right;
    font-size: 16px;
		margin-right: 5%;
}
#original-design .type .flexWrap div p strong {
    color: red;
}
#original-design .type .flexWrap div p strong span{
	font-size: 20px;
}
#original-design .set .flexWrap div {
    width: 32%;
}
#original-design .voice{
	text-align: center;
}
#original-design .voice h3,
#original-design .flow h3{
	text-align: center;
	font-weight: 600;
	font-size: 26px;
	border-bottom: none;
	position: relative;
	display: inline-block;
	padding: 0 65px;
	text-align: center;
	width: auto;
}
#original-design .voice h3:before,
#original-design .flow h3:before,
#original-design .voice h3:after,
#original-design .flow h3:after{
  position: absolute;
  top: calc(50% - 3px);
  width: 50px;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}
#original-design .voice h3:before,
#original-design .flow h3:before{
  left: 0;
}
#original-design .voice h3:after,
#original-design .flow h3:after{
  right: 0;
}
#original-design .voice .flexWrap{
	margin-bottom: 10px;
}
#original-design .voice .flexWrap div{
	width: 48%;
}
#original-design .voice .flexWrap .zirei{
	width: 19.5%;
}
#original-design .voice .flexWrap div p{
	width: 100%;
	margin-top: 20px;
	text-align: left;
}
/*透明ボード*/
#tomei-board{
	margin-top: 200px;
}
#tomei-board h3,
#sonota-board h3{
	font-size: 30px;
	font-weight: 600;
	text-align: center;
	display: block;
	border-bottom: dotted 14px #ffd43d;
	width: 660px;
	margin: 0 auto 30px auto;
}
#tomei-board > div > div{
	margin-bottom: 100px;
}
#tomei-board .main div,
#sonota-board .main div{
	width: 80%;
	margin: 0 auto;
	margin-bottom: 30px;
}
#tomei-board .flexWrap{
	width: 80%;
	margin: 20px auto;
}
#tomei-board .flexWrap div{
	margin-bottom: 20px;
}
#tomei-board .type .flexWrap,
#sonota-board .type .flexWrap{
	width: 98%;
	margin: 20px auto;
}
.itemBox{
	width: 24%;
	display: block;
	padding: 1%;
	background-color: #fff;
	border-radius: 10px;
	border: solid 1px #333;
	margin-bottom: 20px;
	text-decoration: none;
}
.itemBox:hover{
	text-decoration: none;
	opacity: 0.7;
}
.itemBox dd{
	font-weight: 600;
	margin-left: 0;
	margin-top: 8px;
	color: #000;
	text-align: center;
	font-size: 16px;
	height: 60px;
}
.itemBox dd > span{
	font-weight: normal;
	font-size: 14px;
}
.itemBox .btn{
	background: linear-gradient(to bottom, #f59f34 50%, #ea8318 50%);
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 50px;
	letter-spacing: 1px;
	margin: 12px 0 0 0;
	text-align: center;
}
#tomei-board .flexWrap::after{
	content: "";
	display: block;
	width: 23.5%;
	height: 0;
}
#sonota-board .flexWrap::after{
	content: "";
	display: block;
	width: 49%;
	height: 0;
}
.price{
	font-size: 16px;
	color: #000;
	text-align: right;
	margin-top: 22px;
}
.price span{
	color: red;
	font-weight: 600;
}
.price span strong{
	font-size: 22px;
}
/*ご注文から製作までの流れ*/
#original-design .flow{
	text-align: center;
	margin-top: 100px;
}
#original-design .flow > div > div {
    width: 86%;
    margin: 0 auto;
}
/*タブ*/
.flow_tab {
	padding: 0;/*追加*/
  display: flex;
  justify-content: space-between;
	width: 86%;
  margin: 0 auto;
}
.li-red a,.li-blue a {
	color: #fff;
	text-decoration: none;
	display: block;
}
.li-red:hover,.li-blue:hover {
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.li-red,.li-blue {
	font-size: 16px;
	position: relative;
	color: #fff;
	text-align: center;
	z-index: 1;
    list-style: none;
    display: block;
    width: 50%;
    padding: 5px;
    text-align: center;
    color: white;
    font-weight: 600;
    margin-bottom: 0;
}
.li-red::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #E73358;
	transform: scaleY(1.2) perspective(.3em) rotateX(1deg);
	transform-origin: bottom;
}
.li-blue::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #0D6FB8;
	transform: scaleY(1.2) perspective(.3em) rotateX(1deg);
	transform-origin: bottom;
}
.flow_content {
	margin-bottom: 40px;
}
/*枠内*/
.flow-red, .flow-blue {
    margin-top: 0;
}
#original-design .flow > div > div > div >p {
    margin-bottom: 10px;
}
.flow-red{
	margin-top: -100px;
	padding-top: 100px;
}
.flow-red-line {
    border: solid 4px #E73358;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	background-color: #fff;
}
.flow-blue{
	margin-top: -100px;
	padding-top: 100px;
}
.flow-blue-line {
    border: solid 4px #0D6FB8;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	background-color: #fff;
}
.nouki {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}
.flow-red-line > .nouki {
    color: #E73358;
		font-size: 20px;
}
.flow-blue-line > .nouki {
    color: #0D6FB8;
		font-size: 20px;
}
.data {
    background-color: #F7F9DE;
    padding: 5px 20px 20px 20px;
    margin: 20px 0 10px 0;
}
.data-p{
    font-weight: 600;
    color: #ee4f16;
    margin: 10px 0;
}
.flow-table{
    margin: 20px auto 0 auto;
    width: 70%;
    font-size: 14px;
}
.bold{
    font-weight: 600;
}
.linkpage{
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    color:black;
    margin: 10px 0 20px 15px;
}
.linkpage{
    position:relative;
}
.linkpage:before {
    content: ' ';
    display:inline-block;
    position:absolute;
    width:0;
    height:0;
    margin-top: 5px;
    margin-left: -15px;
    border-top:7px solid transparent;
    border-right:10px solid transparent;
    border-bottom:7px solid transparent;
    border-left:10px solid #ee4f16;
}
#flow .button{
    width:45%;
}
/*一番下*/
#bottom > div {
    width: 80%;
    margin: 40px auto;
}

#bottom > div >p {
    text-align: center;
    margin-bottom: 5px;
}

#bottom img{
    width:100%;
}
#bottom li{
    font-size:18px;
    text-align: right;
}
@media screen and (max-width: 750px) {
    #bottom li{
        font-size:14px;
        text-align: right;
    }
}
#bottom ul{
    list-style-type: none;
    text-align: right;
    margin-right: 20px;
    margin-top: 20px;
}
@media screen and (max-width: 750px) {
    #bottom ul{
        margin-bottom: 20px;
    }
}
.list{
    position:relative;
}
.list-item:after {
    content: ' ';
    display:inline-block;
    position:absolute;
    width:0;
    height:0;
    margin-top: 5px;
    margin-left: 6px;
    border-top:7px solid transparent;
    border-right:10px solid transparent;
    border-bottom:7px solid transparent;
    border-left:10px solid #ee4f16;
}
/*↓お問合せボタン*/
.button {
    width: 45%;
    margin: 30px auto;
}
.button a {
    display: block;
    padding: 10px;
    font-size: 24px;
    text-align: center;
    color: white;
    font-weight: 600;
    text-decoration: none;
}
.button-red {
    background-color: #E73358;
	box-shadow:0px 4px 0px 0px #B40404;
    /*border-bottom: solid 4px #B40404;*/
    border-radius: 10px;
    margin-bottom: 20px;
}
.button-red:active {
    position: relative;
    top: 4px;
    box-shadow:0px 0px 0px 0px #cbbc00;
    -moz-box-shadow:0px 0px 0px 0px #cbbc00;
    -webkit-box-shadow:0px 0px 0px 0px #cbbc00;
}
.button-blue {
    background-color: #0D6FB8;
	box-shadow:0px 4px 0px 0px #084B8A;
    /*border-bottom: solid 4px #084B8A;*/
    border-radius: 10px;
}
.button-blue:active {
    position: relative;
    top: 4px;
    box-shadow:0px 0px 0px 0px #cbbc00;
    -moz-box-shadow:0px 0px 0px 0px #cbbc00;
    -webkit-box-shadow:0px 0px 0px 0px #cbbc00;
}

/*スマホ*/
@media screen and (max-width: 750px)  {
	#onayami ul{
		height: auto;
	}
	#onayami .onayamiBtn p a{
		font-size: 16px;
	}
	#original-design h3,
	#tomei-board h3,
	#sonota-board h3 {
		width: auto;
	}
	#original-design h3{
		border-bottom: dotted 8px #ffd43d;
	}
	.textBox{
		width: auto;
	}
	.itemBox{
		width: 49%;
	}
	#tomei-board .type .flexWrap,
	#sonota-board .type .flexWrap{
		display: flex;
	}
	.itemBox dd {
		font-size: 14px;
	}
	#bottom > div{
		width: 98%;
	}
	#original-design .flow > div > div,
	.flow_tab{
		width: 98%;
	}
	.li-red, .li-blue{
		padding: 11px;
	}
	.flow-red-line,.flow-blue-line{
		padding: 6%;
	}
	.flow-table{
		width: auto;
	}
	.button{
		width: 98%;
	}
}