@charset "UTF-8";
/* CSS Document */
/**************************************************
*制作：Shinichi Yamazaki
*Created Date：2022/07
*https://design-momonga.jp/
レスポンシブレイアウトモバイルファーストでの記述。
***************************************************/
/*---------------------------------------
*初期設定
----------------------------------------*/
*,
*:before,
*:after {
/*全称セレクタにより全てのボックスの幅、高さにパディング、線幅も含む様に指定。*/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html{
font-size:62.5%;/*1rem=10px指定。*/
height:100%;/*コンテンツ領域を自動的に画面サイズに合わせたい為、初期値autoを100%に変更する処理。*/
overflow-x:hidden;
}
body{
font-size:1.4rem;/*基準フォントサイズは、14pxを想定。*/
font-family:"Noto Sans JP",sans-serif;
color:#515151;/*基本文字色*/
height:100%;/*コンテンツ領域を自動的に画面サイズに合わせたい為、初期値autoを100%に変更する処理。*/
}
img,
video{
vertical-align:bottom;
max-width:100%;/*フルードイメージ*/
}
a{
text-decoration:none;
color:#25A9CC;
}
a img{
border:none;
}
ul,ol{
list-style-type:none;
}
/*--------------------------------------------------
*共通パーツ設定
--------------------------------------------------*/
/*---↓↓↓ボタンの構造部↓↓↓---*/
.btn-style1{/*ボタンタイプ1構造*/
background: rgba(15,176,194,1.0);
}
.btn-style1 a{/*ボタンタイプ1構造*/
display:block;
width:100%;
height:100%;
color:#FFF;
text-align:center;
padding:20px 20px;
text-decoration:none;
}
/*---↓↓↓見出し↓↓↓---*/
.h-style1{/*各エリアの大見出し*/
text-align:center;
font-size:1.8rem;
font-weight:500;
color:#143468;
line-height:1.5;
}
.h-style2{
font-size:2rem;
font-weight:bold;
color:#F7F7F7;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding: 20px 0 15px 0;
line-height: 2.6rem;
text-align: center;
width: 90%;
margin: 0 auto;
}
/*各ページの大見出し（トップページ以外でサブコンテンツ的な扱いのページ）*/
.h-style3{
font-size:2rem;
color:#595757;
margin:0 0 20px 0;
}
.h-style3 .portlet-title-text{
display: block;
white-space: normal;
font-weight: normal;
letter-spacing:0.05em;
position:relative;
background:transparent;
overflow:visible;
max-width:100%;
margin: 0 0 0 0;
padding: 32px 0 16px 0;
border-bottom: 2px solid #143468;
z-index: 1;
}
.h-style3 .portlet-title-text::before{
content: "";
width:25%;
height: 2px;
display: block;
background: #0fb0c2;
position: absolute;
bottom: -2px;
left: 0;
z-index: 2;
}
/*---↓↓↓文字系↓↓↓---*/
.txt1{/*主に本文用*/
text-align:justify;
line-height:2.4rem;
margin-bottom:15px;
}
.ff1{/*見出しで明朝系を使用する場合の設定*/
font-family:"BIZ UDPMincho","Sawarabi Mincho";
}
.ff2{/*英数字様（日付などのワンポイント変えたい場合に）*/
font-family:Helvetica,Arial,"sans-serif";
letter-spacing:0.1rem;
}
.ff3,
.ff3 span{/*文字を白に*/
color:#BBBBBB!important;
}
.ff4{
font-family: 'Oooh Baby', cursive;
}
.ff5{
font-family: 'Yuji Syuku', serif;
}
/*---↓↓↓背景↓↓↓---*/
.bg-style1{
/*background:#F7F7F7;*/
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#143468+0,194a7f+100 */
background: #143468; /* Old browsers */
background: -moz-linear-gradient(top, #143468 0%, #025f93 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #143468 0%,#025f93 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #143468 0%,#025f93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#143468', endColorstr='#025f93',GradientType=0 ); /* IE6-9 */
}
/*---↓↓↓テーブル↓↓↓---*/
.tbl-basic-style {
border:1px solid #DBDBDB;
margin-bottom:20px;
width:100%;
}
.tbl-basic-style th, .tbl-basic-style td {
font-weight: normal;
border: 1px solid #DBDBDB;
padding: 5px;
vertical-align: middle;
line-height: 2.2rem;
letter-spacing: 0.05rem;
}
.tbl-th-style th {
background:#f5f5f5;
white-space:nowrap;
width:25%;
}
/*---↓↓↓ヘッダー追従いのコード↓↓↓---*/
.clone-nav {
position:fixed;
top:0;
left:0;
z-index:9998;
width:100%;
transition:.3s;
transform:translateY(-100%);
}
.is-show {
transform:translateY(0);
box-shadow:0px 5px 16px -6px rgba(0,0,0,0.4);
}
/*---------------------------------------
*ヘッダーエリア
----------------------------------------*/
header{
background:rgba(255,255,255,1);/*背景色は白（透過処理できる様にrgbaで記載）*/
}
#header-inner{
height:60px;
position:relative;
padding:18px 0 0 18px;
}
#header-logo{
width:200px;
}
#header-gnavi{
display:none;
}
/*言語切り替えナビ*/
#lang{
display:none;
}
#lang-sp{
position:absolute;
top:50%;
right:65px;
transform:translate(0,-50%);
font-size:1.3rem;
}
/* ハンバーガーメニュー */
#hamburger-wrap {
position:absolute;/*配置のため*/
top:20px;/*上からの座標値*/
right:20px;/*右からの座標値*/
width:25px;/*幅の指定*/
height:17px;/*高さの指定*/
}
.hamburger,
.hamburger span {
display:inline-block;/*a要素のため、inline-blockに*/
transition:all .4s;/*アニメーション時の設定*/
}
.hamburger {
position:relative;/*子要素のspanを配置するための基準地点とする。*/
width:100%;/*親ボックスにフィット*/
height:100%;/*親ボックスにフィット*/
}
.hamburger span {
position:absolute;/*絶対配置*/
left:0;/*左からの位置*/
width:100%;/*幅（ライン）は親ボックスにフィット*/
height:3px;/*高さ（ライン）*/
background:#143468;/*ラインの色。アクセントカラーに合わせる*/
border-radius:3px;/*角丸処理*/
}
.hamburger span:nth-of-type(1) {
top:0;/*ハンバーガーメニューライン1本目の上からの位置*/
}
.hamburger span:nth-of-type(2) {
top:7px;/*ハンバーガーメニューライン2本目の上からの位置*/
}
.hamburger span:nth-of-type(3) {
bottom:0;/*ハンバーガーメニューライン3本目の上からの位置*/
}
/*---------------------------------------
*パンクズリスト
----------------------------------------*/
#pankuzu{
/*background:#e8e8e8;*/
background:url("../images/common_texture_gray-stone3.jpg");
/*border-top:1px solid #d4d4d4;*/
padding:15px 15px 12px 15px;
}
#pankuzu p{
color:#A7A7A7;
font-size:1.3rem;
}
#pankuzu p span::after{
content:url("../images/common_icon_arrow-gray.svg");
display:inline-block;
width:7px;
margin:0 6px 0 9px;
padding-bottom:7px;
}
#pankuzu p span:last-child::after{
content:"";
margin:0;
padding-bottom:0;
}
/*---------------------------------------
*コンテンツエリア
----------------------------------------*/
#container{
padding:0 0 0 0;
}
/*---------------------------------------
*フッターコンテンツエリア
----------------------------------------*/
/*---↓↓↓新着情報（#footer-news）↓↓↓---*/
#footer-news{
padding:30px 0 0 0;
margin-bottom:20px;
}
#footer-news-inner{
width:97%;
margin:0 auto 0 auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
#footer-news-inner::after{
content:"";
display:block;
width:49.5%;
height:0;
}
.footer-news-post{
width:49.5%;
min-height:280px;
margin-bottom:5px;
background:#F7F7F7;
}
.footer-news-post-date{
padding:7px 0 7px 0;
background:#002FA7;
color:#FFF;
font-size:1.4rem;
text-align:center;
letter-spacing:0.1rem;
}
.footer-news-text{
padding:7px 10px 15px 10px;
text-align:justify;
line-height:2.2rem;
}
.footer-news-text a{
/*color:#333;*/
}
/*---------------------------------------
*フッターエリア
----------------------------------------*/
footer{
background:#143468;
color:#FFF;
margin:0 0 0 0;
}
footer a{
color:#FFF;
text-decoration:none;
}
#footer-inner{
padding:30px 15px 5px 15px;
}
#footer-logo{
width:180px;
margin: 10px auto 0 auto;
}
#footer-gnavi{
width:220px;
margin: 0 auto 0 auto;
text-align:center;
}
#footer-gnavi li{
padding:0 0 20px 0;
font-size:1.4rem;
}
#privacy a{
font-size:1.2rem;
color:#BDBDBD;
}
#copyright{
display:block;
padding:10px 0 30px 0;
background:#143468;
text-align:center;
font-size:1.3rem;
}
/*********************************************
*タブレット（600px以上の場合）
**********************************************/
@media screen and (min-width:600px){
/*---------------------------------------
*【タブレット】共通パーツ設定
----------------------------------------*/
.h-style1{
font-size:2.2rem;
}
.h-style1 span{
padding: 5px 0 7px 0;
}
.h-style2{
font-size:2.8rem;
padding:30px 0 30px 0;
line-height:4rem;
text-align:center;
}
/*各ページの大見出し（トップページ以外）*/
.h-style3{
font-size:2.2rem;
}
.txt1{
line-height:2.8rem;
}
.none-tab{/*主に改行コード
に使用。*/
display:none;
}
/*---------------------------------------
*【タブレット】ヘッダーエリア
----------------------------------------*/
#header-inner{
height:75px;
padding:22px 0 0 20px;
}
#header-logo{
width:260px;
}
/*言語切り替えナビ*/
#lang-sp{
right:70px;
}
/* ハンバーガーメニュー */
#hamburger-wrap {
top:30px;/*上からの座標値*/
}
/*---------------------------------------
*【タブレット】フッターコンテンツ
----------------------------------------*/
#footer-news{
padding:40px 0 0 0;
margin-bottom:50px;
}
#footer-news-inner::after{
width:33.0%;
}
.footer-news-post{
width:33.0%;
margin-bottom:5px;
}
.footer-news-post-date{
padding:9px 0 9px 0;
font-size:1.5rem;
}
.footer-news-text{
padding:10px 15px 15px 15px;
line-height:2.2rem;
}
/*---------------------------------------
*【タブレット】フッターエリア
----------------------------------------*/
footer{
margin-top:0px;
}
}
/*********************************************
*PC（960px以上の場合）
**********************************************/
@media screen and (min-width:960px){
/*---------------------------------------
*【PC】共通パーツ設定
----------------------------------------*/
.btn-style1{/*ボタンタイプ1構造*/
font-size:1.6rem;
}
.h-style1{
font-size:2.5rem;
}
.btn-style1 a{
padding:25px 20px;
}
.h-style2{
padding:0 0 30px 0;
}
.none-pc{/*主に改行コード
に使用。*/
display:none;
}
.h-style3{
max-width:1120px;
margin:0 auto 20px auto;
}
.h-style3 .portlet-title-text::before {
width:15%;
}
/*---------------------------------------
*【PC】ヘッダーエリア
----------------------------------------*/
#header-inner{
max-width:1120px;
height:60px;
margin:0 auto;
padding:15px 0 0 0;
}
#header-logo{
width:275px;
}
/*グローバルナビゲーション部*/
#header-gnavi{
display:block;/*SPで非表示にしたナビゲーションを表示*/
background:#143468;/*背景色*/
color:#FFF;/*文字色*/
font-size:1.5rem;
}
#header-gnavi a{
color:#F4F4F4;/*リンクの文字色*/
text-decoration:none;/*リンクの下線を非表示*/
display:block;/*リンクの領域を広げるためにブロックレベル要素に変換*/
width:100%;/*ボックスの幅にフィット*/
height:100%;/*ボックスの高さにフィット*/
}
#header-gnavi>ul{
max-width:1120px;/*ボックスの幅*/
margin:0 auto;/*グローバルナビゲーション領域のセンターへ配置*/
text-align:center;
}
#header-gnavi>ul>li{
height:45px;/*ボックスの高さ*/
text-align:center;/*文字をセンターに*/
line-height:45px;/*文字の縦位置をセンターに*/
position:relative;/*第二階層のulの座標指定の起点とする*/
display:inline-block;
}
#header-gnavi>ul>li>.category>a{
padding:0 15px;
}
#header-gnavi>ul>li>.category>a:hover{
background:#0fb0c2;
}
#header-gnavi>ul>li>ul.menu{
width:360px;
position:absolute;/*座標指定で所定の位置に配置*/
top:100%;/*上からの位置*/
left:0;/*左からの位置*/
z-index:9999;
}
#header-gnavi>ul>li>ul.menu>li{
height:0;
background:rgba(3,27,67,.6);
text-align:left;
line-height:1rem;/*継承したline-heightをクリア（paddingで縦位置を調整するため）*/
overflow:hidden;/*先ずは、第2階層のliからはみ出だすかもしれない部分は非表示*/
transition:0.5s;/*0.3秒かけてアニメーションする*/
word-wrap:break-word;
position:relative;
}
#header-gnavi>ul>li:hover>ul.menu>li{
overflow:visible;/*表示*/
height:45px;
}
#header-gnavi>ul>li>ul.menu>li>a{
padding:13px 10px 13px 32px;
background:url("../images/common_icon_arrow-blue.svg") no-repeat;
background-size:8px 13px;
background-position:15px 16px;
/*border-bottom:1px solid #004242;*/
line-height:1.8rem;
color:#E8E8E8;
}
#header-gnavi>ul>li>ul.menu>li>a:hover{
background-color:#0fb0c2;
color:#FFF;
}
#header-gnavi>ul>li>ul.menu>li:last-child>a{
border-bottom:none;
}
#header-gnavi>ul>li>ul.menu>li>ul{
position:absolute;
top:0;
left:360px;
display:none;
width:360px;
}
#header-gnavi>ul>li>ul.menu>li>ul>li{
background:rgba(3,27,67,.6);
text-align:left;
height:45px;
line-height:45px;
}
#header-gnavi>ul>li>ul.menu>li>ul>li>a{
padding:13px 10px 13px 32px;
background:url("../images/common_icon_arrow-blue.svg") no-repeat;
background-size:8px 13px;
background-position:15px 16px;
/*border-bottom:1px solid #004242;*/
line-height:1.8rem;
color:#E8E8E8;
}
#header-gnavi>ul>li>ul.menu>li>ul>li>a:hover{
background-color:#0fb0c2;
color:#FFF;
}
#header-gnavi>ul>li>ul.menu>li:hover>ul{
display:block;/*第2階層にロールオーバーしたら、第3階層を表示*/
}
#header-gnavi>ul>li>ul.menu>li>a.active{
background-color:#0fb0c2!important;
color:#FFF!important;
}
/*言語切り替えナビ*/
#lang{
display:block;
position:absolute;
top:50%;
right:10px;
transform:translate(0,-50%);
font-size:1.5rem;
}
#lang a{
color:#999;
}
#lang a:hover{
color:#e50012;
}
#lang::before{
content:"";
display:inline-block;
width:30px;
height:30px;
margin:-3px 7px 0 0;
background:url("../images/common_icon_lang.svg") no-repeat; background-size: contain;
vertical-align: middle;
}
.lang-separator{
margin: 0 5px;
}
.active{
display:inline-block;
color:#0fb0c2!important;
}
#lang-sp{
display:none;
}
/* ハンバーガーメニュー */
#hamburger-wrap {
display:none;
}
/*---------------------------------------
*【PC】パンクズリスト
----------------------------------------*/
#pankuzu p{
max-width:1120px;
margin:0 auto;
}
/*---------------------------------------
*【PC】フッターエリア
----------------------------------------*/
#footer-logo{
width:215px;
}
#footer-inner{
max-width:1120px;
margin:0 auto;
padding:40px 15px 40px 15px;
}
#footer-gnavi{
width:100%;
text-align:center;
position:relative;
}
#footer-gnavi li{
display:inline;
padding: 0 10px;
}
#privacy a{
font-size:1.2rem;
color:#BDBDBD;
}
}