@charset "utf-8";

/*------------------------------------------------------------------------------
Theme Name: ZEN
Theme URI: http://www.zennet.co.jp/
Description: ZENオリジナルテーマ ZEN開発
Version: 1.0
Author: ZEN
Author URI: http://www.zennet.co.jp/
------------------------------------------------------------------------------*/

/* リセット
-------------------------------------------------------------- */

*,
::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

body,
.wrapper {
    overflow-x : hidden; /* 横スクロール禁止 */
    margin: 0;
}

main {
    display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

b,
strong {
    font-weight: bolder;
}

img,
embed,
object,
iframe {
    vertical-align: bottom;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    text-align: left;
}

td,
th {
    vertical-align: top;
    padding: 0;
}

th {
    text-align: left;
    font-weight: bold;
}

/* 基本スタイル
-------------------------------------------------------------- */

body {
    background-color: #FFFFFF;
    color: #333333;
    font-family: "メイリオ",Meiryo,Arial,Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    line-height: 1.5;
}

/*------　リンクカラー　------*/ 

a:link{
    color: #005599;
    text-decoration: none;
}

a:visited{
    color: #007799;
}

a:hover{
    color: #4499CC;
    text-decoration: none;
}

a:active{
    color: #5555bb;
}

/* レイアウト
-------------------------------------------------------------- */

.inner {
    max-width: 1040px;
    padding: 0 2rem;
    margin: 0 auto;
}

@media screen and (max-width: 640px){
    .inner {
        padding: 0 1rem;
    }
}

/*** header ***/

header,
#header {
    padding: 0;
    margin: 0;
}

/* メインロゴ */
#head_wrap .logo {
    float: left;
    padding-top: 40px;
    padding-bottom: 40px;
}

#head_wrap.fixed .logo {
    padding-top: 15px;
    padding-bottom: 0;
}

@media screen and (max-width: 640px){
    #head_wrap .logo,
    #head_wrap.fixed .logo {
        position: absolute;
        padding-top: 15px;
        padding-bottom: 0;
        padding-left: 10px;
    }
}

/* head電話番号 */
.header_tel {
    float: right;
    color: #183D95;
    font-size: 12px;
    text-align:right;
    margin-top: 15px;
}

.header_tel span {
    font-size: 20px;
}

@media screen and (max-width: 640px){
    .header_tel {
        display: none;
    }
}

    #head_wrap.fixed .header_tel {
        display: none;
    }

/*** main ***/

main,
#main {
    clear: both;
    padding: 0;
    margin: 0;
}

/*** footer ***/

footer,
#footer {
    clear: both;
    background-color: #333;
}


/* 住所電話番号・リンク */

.info {
    width: 45%;
    float: left;
    font-size: 0.9em;
    line-height: 1.1em;
    color: #FFF;
    padding: 20px 0 0 0;
}

.info img {
    margin: 10px 0;
}

.info a:link,
.info a:visited {
    color: #FFF;
}
.info a:hover {
    color: #CFC;
}

/*　リンクバナー */

.link {
    width: 160px;
    float: right;
    font-size: 0.7em;
    line-height: 1.3em;
    color: #999;
    text-align: center;
    padding: 20px 0 0 0;
}

@media screen and (max-width: 640px) {
    .info {
        width: 100%;
        float: none;
        text-align: center;
    }

    .link {
        width: 100%;
        float: none;
    }
}

/*　コピーライト */

.copyright {
    clear: both;
    text-align: center;
    font-size: 0.8rem;
    font-style: normal;
    color: #999;
    padding: 10px 0;
}


/* ナビゲーション
-------------------------------------------------------------- */

/*------　global navigation ------*/
#head_wrap {
    background-color: #FFF;
    position: relative;
    width: 100%;
    z-index: 999;
}

#head_wrap a {
    text-decoration: none;
}

#head_wrap .inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

#head_wrap .inner:after {
    content: "";
    clear: both;
    display: block;
}

#global-nav {
    position: absolute;
    right: 0;
    top: 0;
}

#global-nav ul {
    display: inline-flex;
    list-style: none;    font-family: "ゴシックMB101 B";
    font-size: 14px;
    margin-right: 20px;
    margin-top: 60px;
}

#global-nav ul li span {
    cursor: default;
}

#global-nav ul li span,
#global-nav ul li a {
    display: block;
    color: #333;
    line-height: 40px;
    padding: 0 20px;
}

#global-nav ul li a {
  position: relative;
  display: inline-block;
}

#global-nav ul li a::before,
#global-nav ul li a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #29ABE2;
  transition: .3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

#global-nav ul li a::before {
  top: 0;
}

#global-nav ul li a::after {
  bottom: 0;
}

#global-nav ul li a:hover::before,
#global-nav ul li a:hover::after {
  width: 100%;
}

/* Fixed */
#head_wrap.fixed {
    background: rgba(255, 255, 255, 0.9);
    margin-top: 0;
    top: 0;
    position: fixed;
    height: 70px;
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
    z-index: 9999;
}

#head_wrap.fixed #global-nav ul {
    margin-top: 15px;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 20px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}

#nav-toggle div {
    position: relative;
}

@media screen and (max-width: 800px) {
.logo a img {
    width: 100px;
}

#global-nav ul li span,
#global-nav ul li a {
    padding: 0 10px;
}
}

@media screen and (max-width: 640px) {
        #head_wrap {
        top: 0;
        position: fixed;
        margin-top: 0;
        width: 100%;
        padding: 0;
        /* Fixed reset */
    }

    #head_wrap .inner {
        width: 100%;
        padding: 0;
    }

    #head_wrap .fixed {
        padding-top: 0;
        background: transparent;
    }

    #mobile-head {
        background: rgba(255, 255, 255, 0.9);
        width: 100%;
        height: 70px;
        z-index: 999;
        position: relative;
    }

    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -486px;
        background: rgba(255, 255, 255, 0.9);
        width: 100%;
        text-align: center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }

    #global-nav ul {
        display: block;
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        margin-right: 0px;
    }

    #head_wrap #global-nav ul,
    #head_wrap.fixed #global-nav ul {
        margin-top: 0;
    }

    #global-nav ul li {
        float: none;
        position: static;
    }

    #head_wrap #global-nav ul li span,
    #head_wrap.fixed #global-nav ul li span,
    #head_wrap #global-nav ul li a,
    #head_wrap.fixed #global-nav ul li a {
        width: 100%;
        line-height: 60px;
    }

    #head_wrap #global-nav ul li a:hover,
    #head_wrap.fixed #global-nav ul li a:hover {
        background: rgba(255, 255, 255, 1);
        border-bottom: none;
    }

    #nav-toggle {
        display: block;
    }

    /* #nav-toggle 切り替えアニメーション */
    #nav-toggle span {
        display: block;
        position: absolute;
        height: 4px;
        width: 100%;
        background: #666;
        left: 0;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #nav-toggle span:nth-child(1) {
        top: 0;
    }

    #nav-toggle span:nth-child(2) {
        top: 11px;
    }

    #nav-toggle span:nth-child(3) {
        top: 22px;
    }

    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}

/*------　パンくずリスト　------*/

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 1rem 0 4rem 0;
}

.breadcrumb li:not(:last-of-type)::after {
    content: "›";
    margin: 0 .6em;
    color: #777;
}

/*------　ページトップへ戻る　------*/

#pagetop {
    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 80%;
    line-height: 1.5rem;
    color: #29ABE2;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}

#pagetop a {
    color: #29ABE2;
}

#pagetop::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}

#pagetop:hover,
#pagetop:hover a {
    color: #8bd4f3;
}

@media screen and (max-width: 640px) {
    #pagetop {
        right: 0px;
    }
}

/* 見出し
-------------------------------------------------------------- */

/* ページタイトル */
.page-title {
    clear: both;
    font-size: 1.5rem;
    line-height: 50px;
    letter-spacing: 0.2em;
    text-align: center;
    color: #FFF;
    background: #333;
    padding: 20px 0;
    margin: 0 auto;
}

@media screen and (max-width: 640px){
    .page-title {
        font-size: 1.2rem;
        line-height: 30px;
        padding: 15px 0;
    }
}

/* サブタイトル */
.sub-title {
    clear: both;
    font-size: 1.5rem;
    line-height: 1.3;
    color: #29ABE2;
    border-left: #29ABE2 10px solid;
    border-bottom: #29ABE2 1px solid;
    padding: 0 0 0 20px;
    margin: 0 auto 30px;
}

/* 本文
-------------------------------------------------------------- */

article {
    clear: both;
    margin-bottom: 80px;
}

section {
    clear: both;
    margin-top: 40px;
    margin-bottom: 80px;
}

section p,
section ul,
section ol { margin-bottom: 1em; }

section a:hover { text-decoration: underline; }

section ul li {
    list-style-position: outside;
    list-style-type: disc;
    margin-left: 1.5em;
}

section ol li {
    list-style-position: outside;
    list-style-type: decimal;
    margin-left: 1.5em;
}

/* よく使う要素
-------------------------------------------------------------- */

/*----- 文字サイズ -----*/

.text-ss { font-size: 0.7em; line-height: 1em; }
.text-s { font-size: 0.8em; line-height: 1.2em; }
.text-m { font-size: 1.2em; line-height: 1.5em; }
.text-l { font-size: 1.5em; line-height: 1.8em; }
.text-ll { font-size: 1.8em; line-height: 2em; }

/*----- 文字色 -----*/

.red { color: #CC4455; }
.gray { color: #666666; }
.orange { color: #FF6600; }
.blue { color: #3366CC; }
.darkred { color: #660000; }

/*----- 強調文字 -----*/

strong, b { font-weight: bold; }
em { font-style: normal; text-decoration: underline; }

/*----- ボールド -----*/

.bolder { font-weight: bold; }
.boldno { font-weight: normal; }

/*----- 字下げ -----*/

.indent_1 { text-indent: 1em; }

/*----- テキスト位置 -----*/

.text-center { text-align: center !important;}
.text-left { text-align: left !important;}
.text-right { text-align: right !important;}
.text-top { vertical-align: top !important;}
.text-middle { vertical-align: middle !important; }
.text-bottom { vertical-align: bottom !important;}

/*----- 区切り線 -----*/

.clear { clear: both; }

/*----- 改行調整 -----*/

@media screen and (min-width: 768px){
    .br_pc { display:block; }
    .br_sp { display:none; }
}
@media screen and (max-width: 768px){
    .br_pc { display:none; }
    .br_sp { display:block; }
}

/*----- ロールオーバー時画像透明度変更 -----*/

.highlight a:hover *{
    filter: alpha(opacity=65);
    -moz-opacity:0.65;
    opacity:0.65;
}

/*----- スマホの時だけtelリンクを有効(jQuery) -----*/

.tel-link {}

/*----- 外部リンク -----*/

a.link_ex {
    background: url(../images/link_ex.png) no-repeat right center;
    padding-right: 16px;
    margin-right: 3px;
}

/*----- CLEARFIX（float解除） -----*/

.clearfix{
    zoom: 1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
    content:".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
* html .clearfix{
    display: inline-table;
    /*\*/display: block;/**/
}

/*-----　画像の配置　-----*/

section img,
.img-auto {
    max-width: 100%;
    height: auto;
    width : auto;
}

/*----- カラム -----*/

/* 2カラム */
.column_2 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 4%;
}

.column_2 > .column {
    list-style-type: none;
    width: 48%;
    margin: 0;
}

@media screen and (max-width: 640px){
    .column_2 {
        gap: 36px 0%;
    }
    .column_2  > .column {
        width: 100%;
    }
}

/* 3カラム */
.column_3 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 2%;
}

.column_3 > .column {
    list-style-type: none;
    width: 31%;
    margin: 0;
}

@media screen and (max-width: 640px){
    .column_3 {
        gap: 36px 0%;
    }
    .column_3  > .column {
        width: 100%;
    }
}

/* 4カラム */
.column_4 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 4%;
}

.column_4 > .column {
    list-style-type: none;
    width: 22%;
    margin: 0;
}

@media screen and (max-width: 640px){
    .column_4 {
        gap: 36px 4%;
    }
    .column_4  > .column {
        width: 48%;
    }
}

@media screen and (max-width: 480px){
    .column_4 {
        gap: 32px 0;
    }
    .column_4  > .column {
        width: 100%;
    }
}

/*----- リストスタイル -----*/

/* 横並び definition list */
dl.dlist {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; 
    width: 100%;
}

dl.dlist_200 dt {
    width: 200px;
}
dl.dlist_200 dd {
    width: calc(100% - 200px);
}

dl.dlist_300 dt {
    width: 300px;
}
dl.dlist_300 dd {
    width: calc(100% - 300px);
}

@media screen and (max-width: 700px) {
    dl.dlist dt{ 
        width: 100%;
    }
    dl.dlist dd{
        width: 100%; 
    }
}



/* ページごとの設定
-------------------------------------------------------------- */

/*-------　ホーム　------*/

/* メイン画像 */
.mainimg {
    padding-bottom: 40px;
}

@media screen and (max-width: 640px){
    .mainimg {
        padding-top: 70px;
    }
}

.slide-items {
    width: 100%;
}

.slide-items img {
    width: 100%;
    object-fit: cover;
    min-height: 250px;
}

.slick-arrow{
    z-index: 2!important;
    width: 80px!important;
    height: 80px!important;
}

.slick-next{
    right:-20px!important;
}

.slick-prev{
    left:-20px!important;
}

.slick-outer{
    position: relative;
}

.slick-slide{
    height: auto!important;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

.slick-content{
    width: 80%;
    position: absolute;
    top: 85%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 150;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0;
}

.slick-content p{
    font-family: "ゴシックMB101 B";
	font-size: clamp(16px, 2.2vw, 30px);
    line-height: 1.5;
    -webkit-text-stroke: 2px #FFF;
    text-stroke: 2px #FFF;
    paint-order: stroke;
    text-shadow:
    4px 4px 4px #FFF, -4px -4px 4px #FFF,
    -4px 4px 4px #FFF,  4px -4px 4px #FFF,
    4px 0 4px #FFF, -4px  0 4px #FFF,
    0 4px 4px #FFF,  0 -4px 4px #FFF;
    margin: 0;
    padding: 0 0 10px 0;
}

.slick-content p span{
	color: #183D95;
}


/* ホームタイトル */
.home-title {
    margin-bottom: 40px;
}

/* 特徴 */
.features img {
    padding: 10px;
}

/* お知らせ */
.topics-title {
    position: relative;
    width: 180px;
    color: #FFF;
    font-size: 20px;
    line-height: 1;
    background-color: #183D95;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 12px 0 0 10px;
}

.topics-title::before{
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 3px #FFF;
    border-right: solid 3px #FFF;
    position: absolute;
    top: 19px;
    left: 24px;
    margin-top: -4px;
    transform: rotate(45deg);
}

.topics {
    border-top: 8px solid #183D95;
    border-bottom: 8px solid #183D95;
    padding: 0 20px;
}

.topics dt {
    color: #183D95;
    font-weight: normal;
    border-bottom: 1px solid #eee;
    padding-top: 1em;
}
.topics dd {
    border-bottom: 1px solid #eee;
    padding-top: 1em;
    padding-bottom: 1em;
}

.topics dd p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 640px) {
    .topics dt{ 
        border-bottom: none;
    }
    .topics dd { 
        padding-top: 0.5em;
    }