@charset "UTF-8";

/* font ---------------------------------------
Noto Sans Japanese：font-family: "Noto Sans Japanese";
さわらびゴシック：font-family: "Sawarabi Gothic";
 ---------------------------------------*/
 #wrapper header {
    padding-top: 20px;
    margin-bottom: 50px;
}
 
/* TOP画像 ------------------------- */
#wrapper header .img img,
#wrapper #contents .img img {
	width: 100%;
	max-height: 485px;
}
#wrapper header .img span {
    top: 43%;
    left: 8%;
}
#wrapper header .img span:last-of-type {
    right: 1%;
    left: initial;
    left: auto;
}
#wrapper header .img.top2 span {
    top: 42%;
    left: 25%;
}
#wrapper header .img.top2 span:last-of-type {
    top: 52%;
    left: 28%;
}
#wrapper header .img.top3 span {position: relative;right: initial;line-height: 1.5em;display: block;margin: 10px 0px;}
#wrapper header .img.top3 p {position: absolute;right: 3%;left: 5%;top: 16%;}
#wrapper header .img.top3 p i {
    font-size: 19px;
    font-style: normal;
    color: #fff;
    background: #329acc;
    padding: 4px 10px;
    border-radius: 17px;
    font-family: 'meiryo',sans-serif;
    font-weight: bold;
}
#wrapper header .img.top3 p span + i {
    background: #6cb92d;
}
#wrapper header .img.top4 span {top: 8%; left: initial; right: 3%; line-height: 1.5em;}
#wrapper header .img.top5 span {top: 9%;left: 3%; line-height: 1.5em;}
/* 5つのメニュー ------------------------- */
#indexSection { margin-bottom: 50px; }
#indexSection div {
    text-align: center;
    width: 210px;
    height: 340px;
    position: relative;
    line-height: 1.4em;
    letter-spacing: 0.01em;
}
#indexSection div p.img {
    margin: 0 auto 10px auto;
    width: 90%;
    max-width: 142px;
}
#indexSection div p.img img {
    border: 2px solid #959595;
    width: 100%;
}
#indexSection div dt {
    font-size: 15px;
    color: #2b519b;
    border-bottom: 1px solid #2b519b;
    font-family: "Noto Sans Japanese";
    padding-bottom: 5px;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 1.6vmin;
}
#indexSection div dd {
    text-align: left;
    font-size: 1.4vmin;
    font-size: 12px;
}

#indexSection div p:last-of-type {
    /* margin-bottom: 0; */
    bottom: 0;
    position: absolute;
    width: 100%;
}
#indexSection div p a {
    display: block;
    width: 100%;
    padding: 8px 0px;
    color: #fff;
    background: rgb(100,182,219);
    background: -moz-linear-gradient(top, rgb(100,182,219) 1%, rgb(48,157,207) 52%, rgb(48,157,207) 100%); 
    background: -webkit-linear-gradient(top, rgb(100,182,219) 1%,rgb(48,157,207) 52%,rgb(48,157,207) 100%);
    background: linear-gradient(to bottom, rgb(100,182,219) 1%,rgb(48,157,207) 52%,rgb(48,157,207) 100%);
}

/* NEW*/
#indexSection div.new dt {
    background: url('../images/new.png') no-repeat 0 0;
}
#indexSection div.new p a {
    background: rgb(255,88,55);
    background: -moz-linear-gradient(top, rgb(255,88,55) 0%, rgb(236,60,44) 99%);
    background: -webkit-linear-gradient(top, rgb(255,88,55) 0%,rgb(236,60,44) 99%);
    background: linear-gradient(to bottom, rgb(255,88,55) 0%,rgb(236,60,44) 99%);
}
 

/* コンテンツ ------------------------- */
#cntWrapper article {
    padding-bottom: 10px;
}

#cntWrapper #production {
    background: url("../images/bg.png") 0 0;
}
#cntWrapper #production h1 {
    background: #1e5799;
    text-align: center;
    padding: 15px 0px;
    line-height: 100%;
    position: relative;
}
#cntWrapper #production h1:after {
}
#cntWrapper #production h1
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
#cntWrapper #production h1:before,
#cntWrapper #production h1:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow: 0 0 20px rgba(66, 66, 66, 1);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow: 0 0 20px rgb(66, 66, 66);
    top:50%;
    bottom:0;
    left:200px;
    right:200px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
#cntWrapper #production h1:after {
    right:200px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
#cntWrapper article .inner .one {
    margin-bottom:30px;
}
#cntWrapper article .inner .one p {
    width: 100%;
}
#cntWrapper article .inner .one p img {
    float: right;
    margin-left: 10px;
}
#cntWrapper article .inner .two .pre span {
    font-size: 18px;
    color:#2e8cd8;
    font-weight: bold;
}


/* 注意喚起 ------------------------- */

#cntWrapper #attention {
	width: 800px;
	margin: 0px auto 50px auto;
	background: url("../images/attention/bg.png") repeat 0 0;
	text-align: center;
	padding: 30px 0;
}
#cntWrapper #attention p {
    line-height: 0;
}
#cntWrapper #attention .inner h1 {
    font-size: 35px;
    color: #d20000;
    text-align: center;
    line-height: 1.3em;
    margin-bottom: 15px;
    position: relative;
}
#cntWrapper #attention .inner h1 i {
    top: 12px;
    left: 0;
    font-size: 70px;
    position: absolute;
}
#cntWrapper #attention .inner h1 i:last-of-type {
    left: auto;
    right: 0;
}
#cntWrapper #attention .inner .pre span {
    color: #d20000;
    font-weight: bold;
}
#cntWrapper #attention .inner hr {
    border-top: 1px solid #7c6854;
}
#cntWrapper #attention .inner {
	width: 735px;
	margin: 0px auto;
	background: url("../images/attention/frame_bg.png") repeat-y 0 0;
	padding: 10px 35px;
	box-sizing: border-box;
	text-align: left;
}
#cntWrapper #attention .inner h2 {
	background: #7c6854;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	letter-spacing: 0.4em;
	background: #7c6854; /* Old browsers */
	background: -moz-linear-gradient(top,  #524236 50%, #7c6854 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #524236 50%,#7c6854 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #524236 50%,#7c6854 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#cntWrapper #attention .inner > h2:first-of-type {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#cntWrapper #attention .inner table {
    font-size: 12px;
    margin-bottom: 10px;
}
#cntWrapper #attention .inner table th,
#cntWrapper #attention .inner table td {
    padding: 5px 5px 10px 5px;
}
#cntWrapper #attention .inner table th {
    width: 80px;
    text-align: center;
}
#cntWrapper #attention .inner table th span {
    background: #7c6753;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

#cntWrapper #attention .inner .list {
	border: 1px solid #9e4f41;
	border-radius: 10px;
	background: #fff;
	font-size: 12px;
	padding: 10px;
	box-sizing: border-box;
}
#cntWrapper #attention .inner .list h2 {
    background: #9e4f41;
}

#cntWrapper #attention .inner .list ul {
    margin-top: 10px;
}
#cntWrapper #attention .inner .list ul li {
    border-bottom: 1px solid #ddd;
}
#cntWrapper #attention .inner .list ul li span {
	width: 50%;
    padding-right: 0px;
    font-style: normal;
	display: inline-block;	
}

/*
#cntWrapper #attention .inner .list ul .flex {
    justify-content: flex-start;
}
#cntWrapper #attention .inner .list ul .flex i {
    padding-right: 30px;
    font-style: normal;
}
*/


@media screen and (max-width: 1200px) {
/* 5つのメニュー ------------------------- */
	#indexSection {
		width: 98%;
		margin: 0px auto 30px auto;
		/* display: block; */
	}
	#indexSection div {
		width: 18%;
		height: 360px;
	}

	#indexSection div dt {
		/* font-size: 14px; */
		min-height: 20px;
		height: 36px;
		max-height: 45px;
}

/* コンテンツ ------------------------- */
	#cntWrapper article#contents h1 img {
		width: 65%;
	}
	#cntWrapper article .inner {
		width: 95%;
	}
	#cntWrapper article .inner .one p img{
		width: 40%;
	}
	#cntWrapper article .inner p img {
		width: 100%;
	}
	#cntWrapper article .inner .two .pre {
		width: 100%;
	}
	#cntWrapper article .inner .two .pre span {
		font-size: 15px;
	}

/* 注意喚起 ------------------------- */
	#cntWrapper #attention {
		width: 95%;
	}
	#cntWrapper #attention p {
		display: none;
	}
	#cntWrapper #attention .inner {
		width: 97%;
		background: none;
		border: 5px double #7c6854;
		padding: 10px 20px;
	}
	#cntWrapper #attention .inner h1 {
		font-size: 30px;
	}
	#cntWrapper #attention .inner h1 i {
		font-size: 62px;
	}
	
/* 注意喚起 ------------------------- */
	#cntWrapper #attention .inner .list ul li span {
		display: block;
		width: 100%;
		border-bottom: 1px solid #ddd;
	}
	#cntWrapper #attention .inner .list ul li span:last-of-type {
		border: none;
	}
}


@media screen and (max-width: 768px) {
	#indexSection {
		flex-wrap: wrap;
	}
	#indexSection div {
		width: 49%;
		height: auto;
		text-align: inherit;
		margin-bottom: 10px;
	}
	#indexSection div p.img {
		display: inline-block;
		width: 30%;
		margin: 0 5px 1px auto;
	}
	#indexSection div p img {
		width: 100%;
	}
	#indexSection div dl {
		display: inline-block;
		width: 65%;
		vertical-align: top;
	}
	#indexSection div dt {
		text-align: center;
		height: auto;
	}
	#indexSection div dd {
		font-size: 11px;
	}
	#indexSection div p:last-of-type {
		position: relative;
		width: 100%;
		text-align: center;
	}

/* 注意喚起 ------------------------- */
	#cntWrapper #attention .inner h1 {
		font-size: 3vmin;
	}
	#cntWrapper #attention .inner h1 i {
		font-size: 5vmin;
	}
}


@media screen and (max-width: 480px) { /*smartphone*/
	#wrapper header {
		margin-bottom: 30px;
	}
	#wrapper header .img span { top: 24%; }
	#wrapper header .img span:last-of-type { top: 43%; }
	#wrapper header .img.top2 span {
		left: 23%;
		top: 44%;
	}
	#wrapper header .img.top2 span:last-of-type {
		left: 23%;
		text-align: left;
		top: 59%;
	}
	#wrapper header .img.top3 p {
		top: 7%;
		text-align: left;
		left: 2%;
	}
	#wrapper header .img.top3 p i {
		font-size: 10px;
	}
	#wrapper header .img.top4 span {
		top: 52%;
	}
	#wrapper header .img.top5 span {
		left: 1%;
		top: 0%;
	}	
/* 5つのメニュー ------------------------- */
	#indexSection div {
		width: 100%;
		margin: 0 0 20px 0;
	}
	#indexSection div dt {
		font-size: 15px;
		margin-bottom: 5px;
		padding: 0;
	}
	#indexSection div p.img {
		margin: 0 10px 0px 0;
		width: 75px;
	}
	#indexSection div dl {
		width: 74%;
	}
	#indexSection div p:last-of-type {
		width: 100%;
	}


/* コンテンツ ------------------------- */
	#cntWrapper article .inner .titleBg {
		font-size: 15px;
		margin-top: 10px;
	}

/* 注意喚起 ------------------------- */
	#cntWrapper #attention .inner h1 {
		font-size: 15px;
	}

}