@charset "utf-8";
/*------------------------------------------------------------------------------
[1] レイアウト[ 配置 + 書式設定その他 ]
[2] 詳細デザイン
------------------------------------------------------------------------------*/
/*******************************************************************************
[1] レイアウト[ 配置 + 書式設定その他 ]
*******************************************************************************/
#cmnheaderbg{
	margin:0px;
	width:100%;
	color:#333333;
	font-family: "BIZ UDPGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size:95%;
	font-weight:500;
	background:#FFF;
}
#cmnheaderbg input,#cmnheaderbg select,#cmnheaderbg textarea,#cmnheaderbg button{
	font-family: "BIZ UDPGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size:100%;
	font-weight:500;
}
#cmnheader{
	width:100%;
	min-width:970px;
	box-sizing:border-box;
}
/*******************************************************************************
[2] 詳細デザイン
*******************************************************************************/
/*==============================================================================
	ヘッダ
==============================================================================*/
#cmnheaderbg{
	min-width: 970px;
	border-image:linear-gradient(to right,#01373A,#4E6956) 1/0 0 1px 0;
	border-style: solid;
	border-top:none;
	border-left:none;
	border-right:none;
}
#cmnheader{
	margin:0px auto 0px auto;
	padding:0px 0px 5px 0px;
	width:calc(100% - 100px);
	min-width:970px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#cmnheaderright{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#cmnutil{
	display:flex;
	align-items:center;
}
/*------------------------------------------------------------------------------
	ロゴ
------------------------------------------------------------------------------*/
#cmntlogo img{
	vertical-align:bottom;
}
#cmntlogo h1,#cmntlogo p{
	margin:15px 0px 12px 0px;
}
/*------------------------------------------------------------------------------
	検索
------------------------------------------------------------------------------*/
#cmnsitesearch{
	margin-left:30px;
}
#cmnsitesearch input{
	padding:0px;
    font-size: 120%;
    border:none;
	vertical-align:middle;
    -webkit-appearance: none;
}
#cmnsitesearch form{
	display:flex;
}
#cmnsitesearch #key{
    padding:2px 5px 2px 5px !important;
    width:100%;
    min-width:100px;
    max-width:260px;
    border-bottom:2px solid #608283 !important;
	box-sizing:border-box;
	border-radius:0px;
}
#cmnsitesearch #cmnsitebtn{
	margin-left:15px;
	padding:10px 23px;
	background:#00373A;
	border-radius:0px 3px 3px 0px;
	box-shadow:2px 2px 0px #BFBFBF;
	box-sizing:border-box;
}
/*------------------------------------------------------------------------------
	翻訳
------------------------------------------------------------------------------*/
#cmntranslation{
	position:relative;
	line-height:1.5;
	letter-spacing:-0.02em;
}
#cmntranslation select{
	padding:3px 18px 2px 7px!important;
	height:2.5em;
	-webkit-appearance: none;/* デフォルトのappearance削除 */
	-moz-appearance: none;/* デフォルトのappearance削除 */
	appearance: none;/* デフォルトのappearance削除 */
	display:block;
	color:#222;
	background: #FFF;
	border-width:1px;
	border-style:solid;
	border-radius:3px!important;
	border-color:#608283;
	box-sizing: border-box;
	pointer-events: auto;
	cursor: pointer;
	position:relative;
}
#cmntranslation button{
	margin:0px;
	padding:7px 30px 7px 9px;
	width:14em;
	position:relative;
	appearance:none;
	cursor:pointer;
	background: #FFF;
	border-width:1px;
	border-style:solid;
	border-radius:3px;
	border-color:#608283;
	line-height:1.5;
	text-align:left;
	box-sizing: border-box;
	-webkit-appearance:none;
}
#cmntranslation button::before{
	position: absolute;
	top: calc(50% - 5px);
	right: 9px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #00373A;
	border-right: 2px solid #00373A;
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);
	content: "";
}
#cmntranslation #translationlist{
	padding:5px;
	width:100%;
	height:80vh;
	max-height:500px;
	display:none;
	overflow-y:auto;
	list-style:none;
	position:absolute;
	top:100%;
	left:0;
	z-index:19990;
	background-color:#FFFFFF;
	border-radius:3px;
	box-sizing: border-box;
	text-align:left;
	box-shadow:0px 3px 5px rgba(0,0,0,0.16);
}
#cmntranslation #translationlist li{
	margin:0;
	padding:0px;
	display:block;
}
#cmntranslation #translationlist a{
	padding:4px 5px;
	display:block;
	color:#222;
	text-decoration:none;
	position:relative;
	border-radius:3px;
}
#cmntranslation #translationlist a:hover,
#cmntranslation #translationlist a:focus{
	color:#FFF;
	background-color:#00373A;
}
/*------------------------------------------------------------------------------
　　メニュー
------------------------------------------------------------------------------*/
#cmndropdownmenu{
	margin-left:30px;
}
/*　ボタン
------------------------------------------------------------------------------*/
#cmnsmpmenup1bg .bmenu2{
	position:relative;
}
#cmnsmpmenup1bg .bmenu2 > button{
	margin:0px;
	width:116px;
	padding:15px 48px 15px 10px;
	box-sizing:border-box;
	color:#00373A;
	font-size:90%;
	font-weight:bold;
	background-color:#FFF;
	border:none;
	text-align:center;
	cursor:pointer;
	z-index:1;
	-webkit-appearance:none;
    position:absolute;
	right:0;
	top:0;
}
#cmnsmpmenup1bg .bmenu2 button{
	display:inline-block;
	position:relative;
}
#cmnsmpmenup1bg .bmenu2 > button::before,
#cmnsmpmenup1bg .bmenu2 > button::after,
#cmnsmpmenup1bg .bmenu2 > button span::before{
    width:32px;
    height:4px;
    display:block;
    position:absolute;
    right:0px;
    top:calc(50% - 3px);
    content:"";
    background:#00924C;
    transition: all 0.5s;
}
#cmnsmpmenup1bg .bmenu2 > button::before{
	transform: translateY(-10px);
}
#cmnsmpmenup1bg .bmenu2 > button span::before{
	transform: translateY(10px)
}
#cmnsmpmenup1bg .bmenu2 > button.choice2::after{
	opacity:0;
	transform: scale(0, 1);
}
#cmnsmpmenup1bg .bmenu2 > button.choice2::before{
	transform: rotate(45deg);
}
#cmnsmpmenup1bg .bmenu2 > button.choice2 span::before{
	transform: rotate(-45deg);
}
/*　ドロップダウンメニュー
------------------------------------------------------------------------------*/
#cmnsmpmenup1bg #cmnsmpmenup1menu{
	padding:35px 80px 40px 98px;
	width:calc(100vw - 120px);
	min-width:950px;
	height:auto;
	display:none;
	position:absolute;
	top:100%;
	right:0;
	z-index:99999;
	background:#FFF;
	border:3px solid #00373A;
	box-shadow:2px 2px 0px rgba(0,0,0,0.25);
	box-sizing:border-box;
}
/*	閉じるボタン
------------------------------------------------------------------------------*/
#cmnsmpmenup1menu button.hnclose2{
	margin:0px 0px 0px 0px;
	padding:10px 10px 10px 40px;
	float:right;
	font-size:90%;
	color:#222;
	background-color:#FFF;
	border:1px solid #608283;
	line-height:1.2;
	cursor:pointer;
	border-radius:3px;
	-webkit-appearance:none;
}
#cmnsmpmenup1menu button.hnclose2::before,
#cmnsmpmenup1menu button.hnclose2::after{
	margin:0;
	padding:0;
	width:2px;
	height:15px;
    content:"";
	position:absolute;
	display:inline-block;
	top:10px;
	right:auto;
	left:20px;
	border:0;
	background-color:#006956;
}
#cmnsmpmenup1menu button.hnclose2::before{
	transform:rotate(45deg);
}
#cmnsmpmenup1menu button.hnclose2::after{
	transform:rotate(-45deg);
}
/*　util
------------------------------------------------------------------------------*/
#headerutil{
	margin-bottom:20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#headerutil ul{
	display:flex;
	list-style-type:none;
}
#headerutil ul li a,
#headerutil p.toppage a{
	padding:8px 28px 8px 8px;
	display:block;
	position:relative;
	font-weight: bold;
	color: #00373A;
	text-decoration: none;
	border: 1px solid #00373A;
	border-radius: 2px;
	transition: all .5s;
}
#headerutil ul li a{
	margin-right:10px;
}
#headerutil ul li a:hover,
#headerutil p.toppage a:hover{
	background: #DBE8DF;
}
#headerutil ul li a::before,
#headerutil p.toppage a::before{
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	right: 10px;
	left: auto;
	top: calc(50% - 5px);
	border-top: 2px solid #00373A;
	border-left: 2px solid #00373A;
	content: "";
	transform: rotate(135deg);
	box-sizing:border-box;
}
/*　gnavi
------------------------------------------------------------------------------*/
#headergnavi{
	margin-bottom:40px;
	position:relative;
	background:linear-gradient(to right,#01383B 45%, #4B5D51);
	box-shadow:2px 2px 0px #BFBFBF;
}
#headergnavi ul{
	display:flex;
	list-style-type:none;
}
#headergnavi ul li{
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	width:100%;
	font-size:120%;
	line-height:1.4;
}
#headergnavi ul li a{
	margin:0px;
	padding:25px 0px 27px 0px;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	font-size:110%;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	background:transparent;
	border:none;
	cursor:pointer;
	transition:all .6s;
}
/* 仕切り */
#headergnavi ul li:not(:first-child)::before{
	content:"";
	width:2px;
	height:calc(100% - 30px);
	display:block;
	position:absolute;
	top:15px;
	background:#1B585B;
	z-index:2;
}
#headergnavi ul li.gcate2::before{
	left:calc(20% - 1px);
}
#headergnavi ul li.gcate3::before{
	left:calc(40% - 1px);
}
#headergnavi ul li.gcate4::before{
	left:calc(60% - 1px);
}
#headergnavi ul li.gcate5::before{
	left:calc(80% - 1px);
}
/*　よく利用される情報から探す、ライフイベントから探す
------------------------------------------------------------------------------*/
#headerinfo{
	display:flex;
}
#headerinfo dt{
	margin-bottom: 25px;
	position: relative;
	z-index: 1;
	font-size:130%;
	font-weight:bold;
	text-align:left;
}
#headerinfo dt::before{
	width: 121px;
	height: 48px;
	position: absolute;
	top: -15px;
	left: -25px;
	z-index: -1;
	background: url(images/top/wave_h3_bg.png) no-repeat 50% / contain;
	content: "";
}
/*　よく利用される情報から探す
------------------------------------------------------------------------------*/
#headerriyou ul.flexstyle3 li{
	width:calc(100% / 2 - 15px);
	min-height:99px;
	border: 1px solid #00373A;
	border-radius: 2px;
	box-shadow: none;
}
#headerriyou ul.flexstyle3 li a{
	padding-left: 10px;
	padding-right: 20px;
	font-weight: bold;
	color:#00373A;
	text-decoration: none;
}
#headerriyou ul.flexstyle3 li a:hover{
	background: #DBE8DF;
}
#headerriyou ul.flexstyle3 li a::before{
	width: 8px;
	height: 8px;
	display: block;
	position: absolute;
	right: 10px;
	left: auto;
	top: calc(50% - 5px);
	border-width: 2px 0 0 2px;
	border-color: #00373A transparent transparent #00373A;
	content: "";
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
/*　ライフイベントから探す
------------------------------------------------------------------------------*/
#headerlife:not(:first-child){
	margin-left:40px;
}
#headerlife ul.flexstyle1{
	margin:0;
}
#headerlife ul.flexstyle1 li{
	margin: 0;
	width:calc(100% / 4);
	background: transparent;
	border-bottom: 2px solid #fff;
}
#headerlife ul.flexstyle1 li:nth-child(4n-3) {
  background: linear-gradient(to right,#01373A 30%, #11403F);
}
#headerlife ul.flexstyle1 li:nth-child(4n-2) {
  background: linear-gradient(to right,#144140 30%, #244A45);
}
#headerlife ul.flexstyle1 li:nth-child(4n-1){
  background: linear-gradient(to right,#274B46 30%, #38544B);
}
#headerlife ul.flexstyle1 li:nth-child(4n){
  background: linear-gradient(to right,#3A554C 30%, #4A5D50);
}
#headerlife ul.flexstyle1 li:not(:nth-child(4n)){
	border-right: 2px solid #fff;
}
#headerlife ul.flexstyle1 li a{
	padding-top:8px;
	box-shadow: none;
}
#headerlife ul.flexstyle1 li a img{
	margin-bottom:5px;
}
#headerlife ul.flexstyle1 li a:hover{
	background: rgba(255, 255, 255, 0.1);
}