@charset "UTF-8";
/* CSS Document */
* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: YuGothic,    /* Mac用 */ 'Yu Gothic', /* Windows用 */ sans-serif;
	color: #000;
  }
body {
	background: url(../images/back_img.jpg);
}

nav {
white-space: nowrap;
}
.main-nav {
 -js-display: flex;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30px;
	margin: 0 auto;
}
.main-nav a {
  margin: 10px;
  color: #333;
  display: block;
  padding: 5px;
  text-decoration: none;
}
.main-nav .logo {
}
.main-nav li:first-child {
  margin-right: auto;
}
.main-nav img {
  margin: 0;
  padding: 0;
width: 100%;
}

/*  メインイメージ  */
.mainKV {
	/* width: 100%*/
	position: relative;
	background: url(../images/main_img.jpg) no-repeat top center;
	background-size: cover;
	width: 100%;
	height: 251px;
}

.kv_logo {
	position: absolute;
	top: 22%;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}
.mainKV-logo img {
	width: 17%;
}

/*  コンテンツ  */
.content {
	width: 83%;
	margin: 0 auto;
	padding-top: 70px;
}
.ReedBox {
 -js-display: flex;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	margin-bottom: 70px;
}
.reed {
	flex: 2;
	text-align: center;
	 -js-display: flex;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	padding-right: 100px;
}
.reed img {
	width: 100%;
}
.reed-txt {
	flex: 2;
}
.reed-txt h4 {
	font-size: 127%;
	border-bottom: 1px dotted #555;
	margin-bottom: 10px;
}

.reed-txt span.cap {
	font-size: 14px;
	display: block;
	padding-top: 15px;
}

/*  モルタル造形におけるSDOの3つの安心要素*/
.title_line {
	background-color: #444;
	padding: 15px;
	color: #fff;
	font-size: 20px;
	text-align: center;
}
.col-box {
	width: 90%;
	margin: 0 auto;
}
.container {
 -js-display: flex;
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.col {
	margin-bottom: 3rem;
	padding: 40px 10px 10px;
	width: 30%;
	position: relative;
}
.col img {
	display: block;
	margin-bottom: 15px;
	width: 100%;
	box-shadow: 0 0 13px #888;
}
.col h3 {
	margin-bottom: 12px;
	font-size: 16px;
	text-align: left;
	padding: 5px;
}
.col p {
	padding: 5px;
}
.btn1, .btn2, .btn3 {
	width: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 11px;
	top: 98%;
}
.btn1, .btn2, .btn3 {

}

.btn1 img, .btn2 img, .btn3 img   {
	width: 105%;
	box-shadow: none;
}

/*  contact  */
.contact {
	padding-top: 40px;
	width: 100%;
	margin: 0 auto;
}
.contact ul {
 -js-display: flex;
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	justify-content: center;
}
.contact li {
	margin: 0 35px;
}

/*  Gallery  */
.gallery {
width: 90%;
margin: 0 auto;
padding: 20px 5px 10px 5px;
}
.gallery p {
padding: 10px 0;
}
.gallery ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
align-items: center;
}
.gallery li {
margin: 0 6px;
}
.gallery h2 {
font-family: 'Oswald', sans-serif;
color: #DCCFAD;
font-size: 46px;
}
.gallery li.sub {
color: #594800;
font-weight: bold;
font-size: 17px;
padding-top: 11px;
}
.gallery .ph_box {
width: 100%;
}
.gallery .ph_box ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.gallery .ph_box li {
width: 31%;
}
.gallery .ph_box img {
width: 100%;
height: auto;
display: block;
margin: 20px 0;
}

/*  Mortier  */
.mortier {
width: 90%;
margin: 0 auto;
padding: 20px 5px 10px 5px;
}
.mortier ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
align-items: center;
}
.mortier li {
margin: 0 6px;
}
.mortier h2 {
font-family: 'Oswald', sans-serif;
color: #DCCFAD;
font-size: 46px;
}
.mortier li.sub {
color: #594800;
font-weight: bold;
font-size: 17px;
padding-top: 11px;
}
.mortier-box {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mortier-txt {
flex: 2.5;
margin: 10px 60px 0 0;
}
.mortier-item {
flex: 2;
margin-top: 10px;
}
.mortier-item dt {
font-weight: bold;
font-size: 18px;
display: list-item;
list-style: disc outside;
}
.mortier-item dd {
margin-bottom: 15px;
}

/*  Artist  */
.artist {
width: 90%;
margin: 0 auto;
padding: 20px 5px 10px 5px;
}
.artist ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
align-items: center;
}
.artist li {
margin: 0 6px;
}
.artist h2 {
font-family: 'Oswald', sans-serif;
color: #DCCFAD;
font-size: 46px;
}
.artist li.sub {
color: #594800;
font-weight: bold;
font-size: 17px;
padding-top: 11px;
}
.artist-box {
width: 100%;
margin: 0 auto;
}
.artist-box ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.artist-box li {
margin: 0 10px;
}
.artist-box li p {
padding-left: 40px;
}
.artist-box li.img {
/*width: 50%;*/
}
.artist-box li.artist-txt img {
/*width: 297%;*/
}
.artist_list {
width: 90%;
margin: 0 auto;
}
.artist_list ul {
-js-display: flex;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: flex-start;
}
.artist_list li {
width: 22%;
}
.artist_list img {
width: 100%;
}
.artist_list h4 {
font-family: 'Roboto', sans-serif;
margin-bottom: 5px;
}

/*  notes  */
.notes {
width: 90%;
margin: 0 auto;
padding: 20px 5px 10px 5px;
}
.notes ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 30px;
}
.notes li {
margin: 0 6px;
}
.notes h2 {
font-family: 'Oswald', sans-serif;
color: #DCCFAD;
font-size: 46px;
}
.notes li.sub {
color: #594800;
font-weight: bold;
font-size: 17px;
padding-top: 11px;
}
.tab-box {
border-bottom: 1px solid #555;
}
.tab-box img {
vertical-align: bottom;
padding: 0;
margin: 0;
}
.flex {
-js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
padding: 35px 0 35px 20px;
}
.itemBox {
padding-right: 35px;
}
.itemBox_right {
padding-left: 35px;
}
.itemBox_right ul {
display: block;
}

/* safariにしか適用させない*/
_::-webkit-full-page-media, _:future, :root .itemBox  {
padding-right: 50px;
}
_::-webkit-full-page-media, _:future, :root .itemBox_right  {
padding-left: 70px;
}
_::-webkit-full-page-media, _:future, :root .itemBox_right2  {
padding-left: 70px;
}



.itemBox_right ul li {
list-style: disc outside;
padding-bottom: 10px;
}
.itemBox_right ul li.gosoudan {
list-style: none;
padding-top: 20px;
}

/*  contact  */
.contactBox {
width: 90%;
margin: 0 auto;
padding: 20px 5px 10px 5px;
}
.contactBox ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
align-items: center;
}
.contactBox li {
margin: 0 6px;
}
.contactBox h2 {
font-family: 'Oswald', sans-serif;
color: #DCCFAD;
font-size: 46px;
}
.contactBox li.sub {
color: #594800;
font-weight: bold;
font-size: 17px;
padding-top: 11px;
}
.contactBox p {
margin-top: 10px;
}
.contactBox .contact ul li {
margin: 0 35px;
}
/*   footer  */
footer {
border-top: 5px solid #dccfad;
margin-top: 40px;
padding: 50px;
}
footer ul {
 -js-display: flex;
display: flex;
display: -webkit-flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.company p {
text-align: right;
}

/*  line  */
.line {
	background: url(../images/line.png) 50% 0 repeat-x;
	margin-top: 20px;
}
.tel a {
pointer-events: none;
}





/* ウィンドウサイズが480px以下になった場合 */
@media screen and (max-width : 640px) {
.main-nav {
display: block;
}.main-nav img {
width: auto;
}
.content {
padding-top: 30px;
width: 90%;
}
.ReedBox {
display: block;
margin-bottom: 30px;
}
.reed {
padding-right: 0;
padding-bottom: 20px;
}
.reed-txt {
text-align: center;
}
.reed-txt  h4 {
font-size: 120%;
}
.title_line {
padding: 10px;
text-align: center;
font-size: 15px;
}
.container {
width: 90%;
margin: 0 auto;
}
.col {
width: 100%;
padding: 40px 0 20px 0;
padding-bottom: 30px;
}
.col-Box {
width: 100%;
margin: 0 auto;
}
.col p {
font-size: 87%;
}
.col h3 {
margin-bottom: 5px;
}
.gallery {
padding: 20px 0 10px 0;
}
.gallery h2 {
font-size: 30px;
margin: 0 5px;
}
.gallery ul li {
}
.gallery ul li.sub {
font-size: 15px;
}
.gallery ul li img {
width: 85%;
}
.gallery .ph_box ul {
display: block;
}
.gallery .ph_box li {
width: 100%;
margin: 0 auto;
}
.mortier {
padding: 20px 0 10px 0;
}
.mortier h2 {
font-size: 30px;
padding: 0 5px;
}
.mortier ul li img {
width: 85%;
}
.mortier ul li {
margin: 0;
}
.mortier ul li.sub {
font-size: 13px;
}
.mortier-box {
display: block;
}
.mortier-txt {
width: 100%;
margin: 0 auto;
}
.mortier-item {
width: 90%;
margin: 0 auto;
padding-top: 20px;
}
.artist ul li img {
width: 85%;
}
.artist ul li {
margin: 0;
}
.artist ul li.sub {
font-size: 13px;
}
.artist ul li h2 {
font-size: 30px;
padding: 0 5px;
}
.artist-box li p {
padding-left: 0;
}
.artist-box li.img {
display: none;
}
.artist-box li.artist-txt {
display: none;
}
.artist-box p {
margin-bottom: 20px;
}
.artist_list {
text-align: center;
}
.artist_list ul {
display: block;
}
.artist_list li {
width: 100%;
}
.artist_list h3 {
margin-bottom: 10px;
font-size: 150%;
}
.artist_list p {
font-size: 85%;
margin-bottom: 30px;
}
.itemBox {
padding-right: 0;
text-align: center;
padding-bottom: 20px;
}
.notes ul li img {
width: 85%;
}
.notes ul li {
margin: 0;
}
.notes ul li h2 {
font-size: 30px;
padding: 0 5px;
}
.notes ul li.sub {
font-size: 13px;
}
.flex {
display: block;
padding: 35px 0;
}
.itemBox_right {
padding-left: 20px;
}
.itemBox_right2 {
padding-left: 0;
}

_::-webkit-full-page-media, _:future, :root .itemBox {
padding-right: 0;
}
_::-webkit-full-page-media, _:future, :root .itemBox_right {
padding-left: 20px;
}
_::-webkit-full-page-media, _:future, :root .itemBox_right2 {
padding-left: 0;
}


.contactBox {
padding: 20px 0 10px 0;
width: 90%;
}
.contactBox ul {
width: 100%;
}
.contactBox ul li {
margin: 0;
}
.contactBox ul li img {
width: 100%;
}
.contactBox ul li h2 {
font-size: 30px;
padding: 0 5px;
}
.contactBox ul li.sub {
font-size: 13px;
}
.contactBox .contact ul li {
margin: 0;
}
.contact {
width: 90%;
}
footer {
padding: 30px;
}
footer ul {
display: block;
text-align: center;
}
.company p {
text-align: center;
}
.tel a {
pointer-events: auto;
}

}