@charset "UTF-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+　iPhone用ページのスタイル
+
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 基本フォント ------------------------------ */

body {
	font-family: "メイリオ", Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	background: white;
	color:#2D8AA6;
	min-height: 100vh;
	position: relative;
	margin: 0;
	padding-bottom: 50px; /* footer height + some spacing */
	box-sizing: border-box;
}
body.iFix {
	-webkit-text-size-adjust:none;
}

input,textarea,select {
	font-family:"メイリオ", Helvetica, sans-serif;
	font-size: 100%;
}
body.iFix input,textarea,select {
	font-size: 80%;
}


h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}


/* 基本タグ -------------------- */

body,div,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,ul,ol,li,
p,blockquote,pre,cite,code,caption,
form,fieldset,legend,input,textarea,select,option,label {
	margin: 0px;
	padding: 0px;
}

img,table {
	border: none;
}

img {
	vertical-align: bottom;
}

ol,ul {
	list-style: none;
}

address,em,cite {
	font-style: normal;
}

fieldset {
	border: none;
}

select {
	border: 1px solid white;
	padding:5px;
	color:white;
}


input::-webkit-input-placeholder {
	border: 0 solid #666666;
}
body.iFix input::-webkit-input-placeholder {font-size:70%;/*line-height:1.5*/}

/* 基本テキストリンク -------------------- */
a {
outline: none;
/*-webkit-tap-highlight-color:rgba(0,0,0,0);*/
}
body.iFix a{
/*-webkit-tap-highlight-color:rgba(0,0,255,0.1);*/
}

a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	color: #333;
	text-decoration: none;
}
a:active {
	color: #333;
	text-decoration: none;
}

/*ガイド文字用*/
.tipped { 
    color: #BBB; 
} 


/* --------------------------------------------------------------------------------------
 float
--------------------------------------------------------------------------------------- */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block;}
/*\*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/**/

/* --------------------------------------------------------------------------------------
 全体
--------------------------------------------------------------------------------------- */

.main {
	width: 100%;
	text-align:center;
}

/* --------------------------------------------------------------------------------------
 ヘッダー
--------------------------------------------------------------------------------------- */

.header {
	position: relative;
	z-index: 100;
	width: 100%;
	color: #ffffff;
}

.header .head_com {
	width: 100%;
	height: 20px;
	font-size: 100%;
	text-align: center;
	color: #fff;
	background: #a0a0a0;
	padding: 5px 0;
}

.header .head_main {
	width: 100%;
	height: 100px;
	font-size: 100%;
	color: #fff;
}

.head_main .head_logo{
	width:185px;
	height:25px;
	padding:37px 0 0 40px;
	float:left;
}

.head_main .head_logo p{
	font-size:100%;
	font-weight:bold;
	color:#dfdfdf;
}

.head_main .nav_menu ul{
	margin: 0; 
	padding: 0; 
	list-style: none;
}
.head_main .nav_menu li{
	display: inline; 
	padding: 0; 
	margin: 0;
	width:100px;
	height:100px;
}
.head_main .nav_menu a{
	display: block; 
	padding: 0px;
	text-decoration: none;
	margin: 0px;
}

.head_main .head_flow{
	height:30px;
	font-size:100%;
	text-align:left;
	color:#555;
	background:#efefef;
	padding:10px 0 0 40px;
}

/* Desktop navigation */
@media screen and (min-width: 769px) {
    .head_main .nav_menu {
        display: flex;
        justify-content: center;
        padding-top: 0;
       
    }

    .head_main .nav_menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        /*flex-direction: row-reverse;*/
    }

    .head_main .nav_menu li {
        display: block;
        padding: 0;
        margin: 0;
        width: 100px;
        height: 100px;
    }

    .head_main .nav_menu li img {
        width: 100px;
        height: 100px;
    }

    .head_main .nav_menu a {
        display: block;
        padding: 0;
        text-decoration: none;
        width: 100px;
        height: 100px;
    }

    .head_main .nav_menu_compact {
        display: none;
    }

    .img_area {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 400px;
        background: #f1f2f6;
        text-align: center;
    }

    .contents {
        margin-top: 0px;
    }
}

/* --------------------------------------------------------------------------------------
 コンテンツ(img)
--------------------------------------------------------------------------------------- */

.img_area {
	position:absolute; z-index:1;
	top:130px;
	width:100%;
	height: 400px;
	background:#f1f2f6;
	text-align:center;
}

.img_area .img_com {
	position:absolute; z-index:2;
	line-height:1.6;
	top:20px;
	right:50px;
	width:400px;
	height:300px;
	text-align:center;
	color: #444;
	font-size:140%;
}

.img_area .img_bt {
	position:absolute; z-index:2;
	top:340px;
	right:125px;
	width:250px;
	height:40px;
	background:#E26D0E;
	color:#fff;
	font-size:140%;
}

.img_area .img_bt a{
	display: block; 
	padding-top:5px;
	text-decoration: none;
	color:#fff;
	height:35px;
}

/* --------------------------------------------------------------------------------------
 コンテンツ(一画面）
--------------------------------------------------------------------------------------- */
.contents {
	margin-top: 420px;
	font-size: 100%;
	width: 1024px;
	text-align: center;
	position: relative;
}
.contentsu {
    margin-top:50px;
    z-index:2;
	font-size:100%;
	width:1024px;
	text-align:center;
    position: relative;
}

/* --------------------------------------------------------------------------------------
 コンテンツ(left)
--------------------------------------------------------------------------------------- */

.left_area {
	width: 225px;
	min-height: 940px;
	margin-top: 20px;
	padding: 0 20px 0 0;
	color: #666666;
	background: #ffffff;
	float: left;
	text-align: right;
	border-right: 1px solid #7f7f7f;
}

.left_area ul {
	font-size:120%;
	margin: 0; 
	padding: 0; 
	list-style: none;
	float:right;
}

.left_area li {
	width:200px;
	height:40px;
	color:#231815;
}

/* --------------------------------------------------------------------------------------
 コンテンツ(right)
--------------------------------------------------------------------------------------- */

.right_area {
	width: 734px;
	padding: 0 0 0 20px;
	color: #666666;
	background: #fff;
	float: left;
	text-align: left;
}

.tb_basic {
    width:100%;
    margin:10px 0px 10px 0px;
    padding:0px;
   border-collapse:collapse;
    border-top:1px solid #dfdfdf;
    font-size:90%;
}
.tb_basic .th {
    width:25%;
    padding:10px;
    text-align:left;
    vertical-align:top;
    color:#666666;
    background-color:#f5f5f5;
    border-bottom:1px solid #dfdfdf;
    border-left:10px solid #999999;/*#2D8AA6;*/
}
.tb_basic .td {
    padding:10px;
    border-bottom:1px solid #dfdfdf;
    border-left:1px solid #dfdfdf;
}

.caption {
   width:100%;
   height:20px;
   font-size:120%;
}

.img_exp {
	margin:10px 0 10px 0;
}

.right_area h2 {
	width:96%;
	margin:5px 0 10px 0;
	padding:5px 5px 5px 10px;
	font-size:180%;
	line-height:1.7;
	background:#F1E6F4;
}

.text_on {
	ime-mode:active;
	border:1px solid #c0c0c0;
	height:26px;
	width:400px;
	padding-left:5px;
	margin-bottom:5px;
	font-size:100%;
}

.text_off {
	ime-mode:inactive;
	border:1px solid #c0c0c0;
	height:26px;
	width:400px;
	padding-left:5px;
	margin-bottom:5px;
	font-size:100%;
}

.area_on {
	ime-mode:active;
	border:1px solid #c0c0c0;
	height:150px;
	width:400px;
	padding:5px 0 0 5px;
	font-size:100%;
}

.comfirm_bt {
	width:250px;
	height:40px;
	background:#E26D0E;
	color:#fff;
	border:0px;
	font-size:120%;
}

.back_bt {
	width:250px;
	height:40px;
	background:#999999;
	color:#fff;
	border:0px;
	margin-left:20px;
	font-size:120%;
}

/* Desktop news section styles */
@media screen and (min-width: 769px) {
    .right_area .news_sec{
        display:block;
        float:left;
        width:180px;
        height:280px;
        padding:10px;
        margin-top:10px;
    }

    .right_area .news_sec .news_img {
        width:180px;
        height:135px;
        text-decoration:none;
        border:1px solid #e0e0e0;
        margin-bottom:8px;
    }

    .right_area .news_sec .news_name {
        text-align:left;
        width:180px;
        color:#000;
        font-size:100%;
        padding:4px 0;
    }

    .right_area .news_sec .news_exp {
        text-align:left;
        width:180px;
        color:#555;
        font-size:80%;
        line-height:1.5;
        padding:0 2px;
    }

    .right_area .news_sec .news_date {
        text-align:left;
        width:180px;
        color:#2D8AA6;
        font-size:80%;
        padding:5px 2px 5px 2px;
    }

    .bmenu {
        display:none;
    }

    .maps {
        display:none;
    }
}
/* Mobile navigation */
@media screen and (max-width: 768px) {
    .header {
        height: auto;
        min-height: 80px;
    }
    
    .head_main {
        height: 160px;
        padding-bottom: 20px;
        text-align: center;
    }
    
    .head_main .head_logo {
        display:flex;
        justify-content: center;
        align-items:center;
        text-align: center;
        padding-top: 20px;
        height: 50px;
        margin: 0;
    }

    .head_main .nav_menu {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .head_main .nav_menu ul {
        margin: 0;
        padding: 0;
        margin-bottom:-20px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .head_main .nav_menu li {
        display: block;
        padding: 0;
        margin: 0;
        width:15%;
    }

    .head_main .nav_menu li img {
        width: 80px;
        height: 80px;
    }

    .head_main .nav_menu a {
        display: block;
        padding: 0;
        text-decoration: none;
    }

    .img_area {
        position: relative;
        top: 0;
        margin-top: 0px;
        width: 100%;
        height: auto;
        min-height: 200px;
        background: #f1f2f6;
        text-align: center;
        padding: 40px 0 20px;
    }

    .img_area > img {
        display: none;
    }

    .img_area .img_com {
        position: relative;
        top: 20px;
        right: auto;
        width: 90%;
        height: auto;
        margin: 0 auto 30px;
        font-size: 120%;
        line-height: 1.6;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .img_area .img_bt {
        position: relative;
        top: 20px;
        right: auto;
        width: 250px;
        height: 40px;
        margin: 0 auto;
        margin-bottom:20px;
    }

    .contents {
        margin-top: 0px;
    }
    .mapp {
        display:none;
    }
    .maps {
        text-align:center;
        width:95%;
        padding:2%;
    }
}
/* Mobile news section styles */
@media screen and (max-width: 768px) {
    .contents{
        margin-top: 0px;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    .contentsu {
        margin-top: 80px;
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .left_area {
        display: none;
    }

    .right_area {
        width: 100%;
        padding: 0;
        float: none;
    }

    .right_area .news_sec {
        display: flex;
        width: 100%;
        height: auto;
        padding: 15px 10px;
        margin: 10px 0;
        border-bottom: 1px solid #e0e0e0;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

    .right_area .news_sec .news_img {
        width: 120px;
        height: 90px;
        margin-right: 15px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .right_area .news_sec .news_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .right_area .news_sec .news_content {
        flex: 1;
        min-width: 200px;
    }

    .right_area .news_sec .news_name {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .right_area .news_sec .news_date {
        font-size: 12px;
        color: #2D8AA6;
        margin-bottom: 5px;
    }

    .right_area .news_sec .news_exp {
        width: 100%;
        font-size: 14px;
        line-height: 1.4;
    }

    .right_area h2 {
        font-size:150%;
    }

    .img_exp img{
        width:100%;
        height:auto;
    }

    .text_on {
        width:300px;
    }
    
    .text_off {
        width:300px;
    }
    
    .area_on {
        width:300px;
    }
    
    .comfirm_bt {
        width:200px;
    }
    
    .back_bt {
        width:200px;
    }

    /* Adjust footer position for mobile */
    .footer {
        position: absolute;
        bottom: 0;
    }
}

/* --------------------------------------------------------------------------------------
 フッター
--------------------------------------------------------------------------------------- */

.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	color: #ffffff;
	height: 30px;
	background: #a0a0a0;
}

@media screen and (max-width: 768px) {
    body {
        padding-bottom: 50px;
    }

    .contents {
        margin-bottom: 30px;
    }

    .footer {
        position: absolute;
        bottom: 0;
    }
}