@charset "UTF-8";

/* ///////////////////////////////////////////////////////////////////

SP

/////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 750px) {
/* =========================================================
common
========================================================= */
#contents .frm {
	width: 86%;
	background: url(/common/img/section-bg.svg) no-repeat left top / 70px auto;
	padding: 0 0 1em;
	margin-bottom: 2.5em;
	background: none;
}
#contents .frm h2 {
	color: #0095d6;
	padding: 2.5em 0 0em;
	font-size: 17px;
}
/* =========================================================
contents
========================================================= */
#contents {
}
#contents #intro .catch {
	color: #021d4d;
	font-size: 1.6em;
	font-weight: bold;
	padding: 1.5em 0;
}    
/* =========================================================
mv
========================================================= */
#contents #mv {
	background: url(../../contents8%20-%20Copy/img/main.jpg) no-repeat center / cover;
    width: 99%;
}
#contents #mv h1 {
}

#contents #mv h1 .jpn {
}
#contents h1 {
	background: #021d4d;
	color: #fff;
	padding: 0.5em 0;
	font-size : 1.4em;
	font-weight: normal;
}    
/* =========================================================
intro
========================================================= */
#contents #intro {
	padding: 0 0 3em;
   width: 100%;
}
#contents #intro .catch {
	color: #021d4d;ttl
	font-size: 20px;
	font-weight: bold;
	padding: 1.5em 0;
}
#contents #intro .lead {
	width: 100%;
	text-align: justify;
}
#contents #intro .off {
	color: #021d4d;
	font-weight: bold;
}
/* =========================================================
snav
========================================================= */
#contents #snav {
}
#contents #snav ul {
}
#contents #snav ul li {
	width: 20%;
}
/* =========================================================
article
========================================================= */
#contents article {
	width: 100%;
	padding: 0;
	background: none;
}
#contents article .ttl {
	background: #fff;
	text-align: center;
	padding: 0.5em 0 0;
}
#contents article .ttl span {
	padding: 0.5em 0 0;
}
/* =========================================================
outline
========================================================= */
#contents #outline {
}
#contents #outline h2 {
}
#contents #outline .list {
	width: 98%;
	padding: 0 0 0;
}
#contents #outline .list dl {
	width: 100%;
	text-align: left;
	padding: 0.5em 0 0 10px;
}
#contents #outline .list dl:after {
	content: "";
	display: block;
	clear: both;
}
#contents #outline .list dl dt {
	color: #0095d6;
	width: 100%;
	text-align: center;
	font-size: 1.4em;
	padding: 1em 0;
}
#contents #outline .list dl dd {
	width: 100%;
    padding-left: -50px;   
}
#contents #outline .lead {
	width: 90%;
	padding-top: 30px;
	line-height: 2.5;
}
#contents #outline .list ul li{
    width: 100%;
	font-size: 11px;
    text-align: left;
    padding-left: 5px;
    text-indent: -1em;
}     
    
/* =========================================================
other
========================================================= */
#contents #other {
        width: 95%;
}
#contents #other h2 {
}
#contents #other .lead {
	padding: 0 0 3em;
}
#contents #other section {
	width: 100%;
}
#contents #other section:after {
	content: "";
	display: block;
	clear: both;
}
#contents #other section .photo {
}
#contents #other section .wrap {
}
#contents #other section .wrap:after {
	conetnt: "";
	display: block;
	clear: both;
}
#contents #other section .txt {
}
#contents #other section .more {
	float: right;
}
#contents #other section .more a {
	width: 200px;
	border-radius: 20px;
	padding: 0.5em 0;
}
#contents #other .company {
	padding: 0;
}
#contents #other .company .photo {
	padding: 0 0 1.5em;
}
#contents #other .company .photo img {
}
#contents #other .company .wrap {
	width: 100%;
}
#contents #other .company .wrap .txt {
	text-align: justify;
	padding: 0.5em 0 1em;
}
#contents #other .company .wrap .more {
}
#contents #other .company .wrap .more a {
}
#contents #other .offg {
	width: 95%;
	padding: 0 0 2em;
	text-align: justify;
}
#contents #other section .photo_l {
	padding: 0;
}
#contents #other section .photo_l  iframe{
    width:80%;
}
#contents #other section .wrap_l {
}
#contents #other section .wrap_l:after {
	conetnt: "";
	display: block;
	clear: both;
}
#contents #other section .txt_l {
}
#contents #other section .more_l {
	float: left;
}
#contents #other section .more_l a {
	width: 200px;
	border-radius: 20px;
	padding: 0.5em 0;
}
#contents #other .company_l {
	padding: 0 0 1em;
}
#contents #other .company_l .photo_l {
	width: 95%;
}
#contents #other .company_l .photo_l img {
}
#contents #other .company_l .wrap_l {
	width: 100%;
}
#contents #other .company_l .wrap_l .txt_l {
	text-align: justify;
	padding: 0.5em 0 1em;
}
#contents #other .company_l .wrap_l .more_l {
}
#contents #other .company_l .wrap_l .more_l a {
}
#contents #other .offg_l {
	width: 88%;
	padding: 0.5em 0 1em;
	text-align: left;
}
#contents section .photo {
}
#contents section .photo img {
	width: 80%;
}
#contents section .photo_l {
	width: 80%;
}
#contents #other .more a {
	width: 200px;
	border-radius: 25px;
	padding: 0.5em 0;
}    

/* =========================================================
main
========================================================= */
#contents #main {
	width: 90%;
	padding-top: 3em;
}
#contents #main h2 {
	font-size: 1.4em;
}
#contents #main .wrap {
	width: 100%;
	padding: 1.5em 0 1.5em 0;
}
#contents #main .wrap dl {
	width: 100%;
	display: flex;
	padding-top: 10px;
	font-size: 3.0em;
}
#contents #main .wrap dl dt {
	padding: 0;
	margin: 0;
	width: 20%;
	height: 28px;
	line-height: 28px;
}
#contents #main .wrap dl dd {
	padding: 0;
	width: 80%;
	text-align: left;
	line-height: 28px;
	height: 28px;
	text-indent: 0.5em;
}
#contents #main .wrap dl dd span {
}
#contents #main .wrap .tel,
#contents #main .wrap .fax {
}
#contents #main .wrap .mail {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.0em;
}
#contents #main .wrap .mail dt {
}
#contents #main .wrap .mail dd {
	line-height: 1.1;
	font-size: 0.6em;
}
#contents #main .wrap .mail dd .notice {
	font-size: 0.4em;
	display: block;
	padding: 0.5em 0 0 0;
	letter-spacing: 0.5px;
}
#contents #main .talp {
	width: 98%;
	border: solid 1px #0095d6;
	text-indent: 1px;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
	padding: 1em;
	font-size: 98%;
	text-align: left;
}
#contents #main .talp td {
	border-right: solid 1px #0095d6;
	border-bottom: 1px solid #0095d6;
	font-size: 90%;
	text-align: left;
    cellpadding: 2px;
    }
    
    
    
/* =========================================================
btns
========================================================= */

#contents #btns h2 {
	color: #0095d6;
	font-size: 1.2em;
	padding: 2em 0 1em;
}
#contents #btns .wrap {
	width: 100%;
	padding: 0 0 3em;
}
#contents #btns .wrap a {
	width: 100%;
	border-radius: 24px;
	padding: 0.6em 0;
}
#contents #btns .wrap .form {
	padding-bottom: 1em;
}
#contents #btns .wrap .form a {
	background: #0095d6 url(/common/img/common-arw2.svg) no-repeat right 20px center / 6px auto;
	color: #fff;
	trantision: color 0.2s ease, background 0.2s ease;
}
#contents #btns .wrap .form a:hover {
	background: #fff url(/common/img/common-arw1.svg) no-repeat right 20px center / 6px auto;
	color: #0095d6;
}
#contents #btns .wrap .fax {
}
#contents #btns .wrap .fax a {
}

#main2 .key{
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  background-color: #c8edfb;
  text-align: center;
}
#main2 .key
a:hover { 
	color: white; 
    background-color: #087da4;
}

#main2 .key .more a {
	padding: 8px 0;
	width: 90%;
	border-radius: 24px;
}
}

/* ///////////////////////////////////////////////////////////////////

PC

/////////////////////////////////////////////////////////////////// */

@media screen and (min-width: 750px) {
/* =========================================================
common
========================================================= */

#contents .frm h2 {
	color: #0095d6;
	padding: 2.5em 0 0em;
	font-size: 20px;
}
/* =========================================================
contents
========================================================= */
#contents {
}
#contents #intro .catch {
	color: #021d4d;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.2em;
	padding: 2em 0;
}/* =========================================================
mv
========================================================= */

#contents #mv {
	background: url(../../contents8%20-%20Copy/img/main.jpg) no-repeat center / cover;
	width: 100％;
}
#contents #mv h1 {
}
#contents #mv h1 .eng {
}
#contents #mv h1 .jpn {
}
#contents h1 {
	background: #021d4d;
	color: #fff;
	padding: 0.5em 0;
	font-size :1.4em;
	font-weight: normal;
}     
    
/* =========================================================
intro
========================================================= */
#contents #intro {
	padding: 0 0 0em;
}
#contents #intro .catch {
	color: #021d4d;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.2em;
	padding: 2em 0;
}
#contents #intro .lead {
	width: 80%;
}
#contents #intro .off {
	color: #021d4d;
	font-weight: bold;
}
/* =========================================================
snav
========================================================= */
#contents #snav {
}
#contents #snav ul {
}
#contents #snav ul li {
	width: 20%;
}
/* =========================================================
article
========================================================= */
#contents article {
	background: url(/common/img/ttl-line.svg) repeat-x center top 15px / auto 5px;
	width: 1100px;
	padding: 0 0 4em;
}
#contents article .ttl {
	background: #fff;
}
#contents article .ttl span {
	padding: 0.5em 0 0;
}
/* =========================================================
outline
========================================================= */
#contents #outline {
}
#contents #outline h2 {
}
#contents #outline .list {
}
#contents #outline .list dl {
	width: 920px;
	text-align: left;
	line-height: 1.5;
	padding: 0px;
}
#contents #outline .list dl:after {
	content: "";
	display: block;
	clear: both;
}
#contents #outline .list dl dt {
	color: #0095d6;
	float: left;
	width: 900px;
    font-size: 20px;
    padding-bottom: 20px;
}
#contents #outline .list dl dd {
	float: right;
	width: 920px;
}
#contents #outline .lead {
	width: 90%;
	padding-top: 0px;
	line-height: 1.5;
}
#contents #outline .list ul li{
    width: 870px;
	font-size: 12px;
    text-align: left;
    text-indent: -2em;
   padding-left: 2em;
    padding-top: 0em;
}    
    
    
    
/* =========================================================
other
========================================================= */
#contents #other {
    width: 90%;
}
#contents #other h2 {
}
#contents #other .lead {
	padding: 0 0 3em;
}
#contents #other section {
	width: 100%;
}
#contents #other section:after {
	content: "";
	display: block;
	clear: both;
}


#contents #other section .txt {
}
#contents #other section .more {
	float: right;
}

#contents #other .company {
	padding: 0 0 4em;
}
#contents #other .company .photo {
	width: 50%;
}
#contents #other .company .photo img {
}
#contents #other .company .wrap {
	width: 100%;
}
#contents #other .company .wrap .txt {
	text-align: justify;
	padding: 0.5em 0 1em;
}
#contents #other .company .wrap .more {
}
#contents #other .company .wrap .more a {
}
#contents #other .offg {
	width: 90%;
	padding: 0.5em 0 1em;
	text-align: left;
}
#contents #other section .photo_l {
	float: right;
	padding: 1em 0;
}
#contents #other section .wrap_l {
	float: left;
}
#contents #other section .wrap_l:after {
	conetnt: "";
	display: block;
	clear: both;
}
#contents #other section .txt_l {
}
#contents #other section .more_l {
	float: left;
}
#contents #other section .more_l a {
	width: 200px;
	border-radius: 20px;
	padding: 0.5em 0;
}
#contents #other .company_l {
	width: 1200px;
	padding: 0 0 4em;
}
#contents #other .company_l .photo_l {
	width: 50%;
}
#contents #other .company_l .photo_l img {
}
#contents #other .company_l .wrap_l {
	width: 46%;
    }
#contents #other .company_l .wrap_l .txt_l {
	text-align: justify;
	padding: 0.5em 0 5em;
}
#contents #other .company_l .wrap_l .more_l {
}
#contents #other .company_l .wrap_l .more_l a {
}
#contents #other .offg_l {
	width: 88%;
	padding: 0.5em 0 1em;
	text-align: left;
}
#contents #other .more a {
	padding: 8px 0;
	width: 300px;
	border-radius: 24px;
} 
    

        
    
/* =========================================================
main
========================================================= */
#contents #main {
	padding-top: 1em;
}
#contents #main h2 {
}
#contents #main .wrap {
	width: 760px;
	padding: 3em 0 1.5em;
}
#contents #main .wrap:after {
	content: "";
	display: block;
	clear: both;
}
#contents #main .wrap dl {
	float: left;
	margin-bottom: 1em;
}
#contents #main .wrap dl dt {
}
#contents #main .wrap dl dd {
}
#contents #main .wrap dl dd span {
}
#contents #main .wrap dl dd .notice {
}
#contents #main .wrap .tel,
#contents #main .wrap .fax {
	font-size: 34px;
	margin-right: 1em;
}
#contents #main .wrap .mail {
	font-size: 24.1px;
}
#contents #main .wrap .mail dt {
}
#contents #main .wrap .mail dd {
}
#contents #main .wrap .mail dd span {
}
#contents #main .wrap .mail dd .notice {
	font-size: 50%;
	display: inline;
	padding: 0 0 0 1em;
}
    
#contents #main .talp {
	width: 860px;
	border: solid 1px #0095d6;
	text-indent: 1px;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
    margin-bottom: 15px;
	padding: 1em 0;
	font-size: 100%;
	text-align: justify;
}
#contents #main .talp td {
	border-right: solid 1px #0095d6;
	border-bottom: 1px solid #0095d6;
	padding: 1em 1em;
}   
    
    
/* =========================================================
btns
========================================================= */
#contents #btns {
}
#contents #btns h2 {
	color: #0095d6;
	font-size: 20px;
	padding: 3em 0 1em;
	letter-spacing: 0.2em;
}
#contents #btns .wrap {
	width: 620px;
	padding: 0 0 8em;
}
#contents #btns .wrap:after {
	content: "";
	display: block;
	clear: both;
}
#contents #btns .wrap a {
	width: 300px;
	border-radius: 24px;
	padding: 0.6em 0;
}
#contents #btns .wrap .form {
	float: left;
}
#contents #btns .wrap .form a {
	background: #0095d6 url(/common/img/common-arw2.svg) no-repeat right 20px center / 6px auto;
	color: #fff;
	trantision: color 0.2s ease, background 0.2s ease;
}
#contents #btns .wrap .form a:hover {
	background: #fff url(/common/img/common-arw1.svg) no-repeat right 20px center / 6px auto;
	color: #0095d6;
}
#contents #btns .wrap .fax {
	float: right;
}
#contents #btns .wrap .fax a {
}
#contents section .photo {
	width: 50%;
}
#contents section .photo img {
	width: 80%;
}
    

}