@charset "UTF-8";

/* common */
html {
	margin: 0;
	padding:0;
}
body {
	margin: 0;
	padding: 0;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
	font-weight: 500;
	color: #3a2d25;
	line-height: 2.0;
	position: relative;
}
.lock {
	overflow:hidden;
}
.sp-block{
    display: none;
}
.noscroll{
    overflow: hidden;
}
main{
    padding-top: 100px;
}
h2,h3,h4,h5 {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
}
ul,li,dl,dt,dd {
	margin:0;
	padding:0;
	list-style: none;
}
em { font-style: normal;}
a { text-decoration: none;}
a:hover { transition: .3s;}
figure {margin: 0;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.wrapper {
    margin-bottom: 120px;
}
.inner {
	width:80%;
	margin:0 auto;
}
.btn {
	width: 200px;
    margin: 10px;
    padding: 15px;
    display: inline-block;
    text-align: center;
    letter-spacing: 0.05em;
}
.btn-primary {
    background-color: #13385f;
    color: #fff;
}
h2 {
	text-align: center;
    font-size: 2.2rem;
	margin-bottom: 40px;
}
h3 {
    border-bottom: 3px solid #13385f;
    padding-bottom: 10px;
    margin-bottom: 40px;
    font-size: 1.6rem;
}
a{
    transition: 0.3s;
}
a:hover{
    opacity: 0.8;
    transition: 0.3s;
}

/* header */
header {
    position: fixed;
    top: 0;
    left: 0;
	height: 100px;
	width: 100%;
	margin: 0 auto;
	background-color:#fff;
	display:-ms-flexbox;
	display:-webkit-flex;
	display: flex;
	-ms-flex-pack:justify;
	-webkit-justify-content: space-between;
	justify-content:space-between;
	align-items: center;
    z-index: 100;
}
header h1 {
	margin: 0 0 0 50px;
}
header h1 a {
	color: #000;
}
header ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 50px 0 0;
}
header ul li {
	font-weight: bold;

}
header ul li a {
	color: #333333;
	text-decoration: none;
	display: block;
	position: relative;
	width: 8em;
	transition: .3s;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 3px;
}
header .head ul li a:hover {
	color:#333;
}

/* footer */
.footer_contact {
    padding: 60px 0;
    text-align: center;
    background: #ececec;
}
.footer_contact .btn-wrap .no_link {
    pointer-events: none;
}
.copyright {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px 50px;
    text-align: center;
    color: #ccc;
    background-color: #333;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.copyright a {
    color: #ccc;
}

/* mainvisual */
.mainvisual {
	position: relative;
	margin-bottom: 120px;
}
.mainvisual img {
	width: 100%;
}
.mainvisual h2 {
	color: #333333;
	z-index: 1;
	font-weight: bold;
	font-size: 2.25rem;
	text-align: center;
	margin: 0;
	letter-spacing: 0.06em;
	line-height: 1em;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translateY(-50%) translateX(-50%);
	width: 100%;
}
/* top-greeting */
.top-greeting {
    margin-bottom: 120px;
}
.top-greeting dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
}
.top-greeting dt {
    width: 35%;
}
.top-greeting dt figure img {
    width: 100%;
}
.top-greeting dd {
    width: 60%;
}

/* top-business */
.top-business {
    padding: 80px 0;
    background: url(../images/top-business_bg.jpg);
    background-position: center center;
    background-size: cover;
    margin-bottom: 120px;
}
.top-business h2,
.top-business p {
    color: #fff;
}
.top-business p,
.top-business_btn {
    text-align: center;
}
.top-business p {
    margin-bottom: 40px;
}
.top-business_btn a {
    color: #fff;
    border: 1px solid #fff;
}

/* top-news */
.top-news .news-archive {
	margin-bottom: 40px;
}
.top-news .news-archive li {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 40px 0;
    border-bottom: 1px solid #c2c2c2;
}
.top-news .news-archive li a{
    color: #000;
}
.top-news .news-archive li a:hover{
    text-decoration: underline;
}
.top-news .news-archive li:first-child {
	border-top: 1px solid #c2c2c2;
}
.top-news .news-archive li time {
	display: block;
    margin-right: 30px;
    font-weight: 700;
}
/* .top-news .news-archive li a {
	display: block;
    color: #333333;
} */
.top-news p {
	text-align: left;
}
.top-news_btn {
    text-align: center;
}

/* subvisual */
.subvisual {
	height: 300px;
    background-image: url(../images/mv.jpg);
    position: relative;
    margin-bottom: 20px;
}
.subvisual::before {
	content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,24,40,.4);
    z-index: 1;
}
.subvisual h2 {
	color: #fff;
	z-index: 1;
	font-weight: bold;
	font-size: 2.25rem;
	text-align: center;
	margin: 0;
	letter-spacing: 0.06em;
	line-height: 1em;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translateY(-50%) translateX(-50%);
	width: 100%;
}

/* breadcrumb */
.breadcrumb {
    margin-bottom: 120px;
}
.breadcrumb ul {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;
    padding: 0;
}
.breadcrumb li:after {
    content: ">";
    margin: 0 0.5em;
}
.breadcrumb li:last-of-type:after {
    content: "";
    margin: 0;
}
.breadcrumb span {
    color: #000;
}
.breadcrumb a span{
    text-decoration: underline;
}


/* company */
.company_sv {
	height: 300px;
    background-image: url(../images/company_sv.jpg);
    margin-bottom: 20px;
}
.company_profile table {
	width: 100%;
    border-collapse: collapse;
    margin-bottom: 120px;
}
.company_profile table th {
    width: 15%;
    font-weight: 700;
    text-align: left;
    padding-right: 1em;
    vertical-align: top;
}
.company_profile table tr:first-child th,
.company_profile table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}
.company_profile table th, 
.company_profile td {
    padding: 1.5em 0;
    border-bottom: 1px solid #c2c2c2;
}
.company_profile table tr:first-child th,
.company_profile table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}

/* access */
.access_map table {
	width: 100%;
    border-collapse: collapse;
	margin-bottom: 50px;
}
.access_map table th {
    width: 15%;
    font-weight: 700;
    text-align: left;
    padding-right: 1em;
    vertical-align: top;
}
.access_map table tr:first-child th,
.access_map table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}
.access_map table th, 
.access_map td {
    padding: 1.5em 0;
    border-bottom: 1px solid #c2c2c2;
}
.access_map table tr:first-child th,
.access_map table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}

/* business */
.business_sv {
    height: 300px;
    background-image: url(../images/business_sv.jpg);
    position: relative;
    margin-bottom: 20px;
}
.business_description_left {
	margin-bottom: 360px;
}
.business_description_left dl{
  width: 100%;
  position: relative;
}
.business_description_left dl dt img{
  width: 60%;
  height: 500px;
  object-fit: cover;
} 
.business_description_left dl dd{
  width: 40%;
  position: absolute;
  top: 40%;
  left:40%;
  background-color: #fff;
  color: #333;
  padding: 80px;
  z-index: 2;
  -moz-box-shadow: 3px 10px 45px -18px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 10px 45px -18px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 3px 10px 45px -18px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 10px 45px -18px rgba(0, 0, 0, 0.2);
}
.business_description_right {
	margin-bottom: 360px;
}
.business_description_right dl {
  width: 100%;
  position: relative;
}
.business_description_right dt img{
  width: 60%;
  height: 500px;
  object-fit: cover;
}
.business_description_right dt{
	display: flex;
    justify-content: flex-end;
}
.business_description_right dd{
  width: 40%;
  position: absolute;
  top: 40%;
  left:10%;
  background-color: #fff;
  color: #333;
  padding: 80px;
  z-index: 2;
  -moz-box-shadow: -10px 10px 45px -18px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: -10px 10px 45px -18px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: -10px 10px 45px -18px rgba(0, 0, 0, 0.2);
  box-shadow: -10px 10px 45px -18px rgba(0, 0, 0, 0.2);
}

/* product */
.product_sv {
    height: 300px;
    background-image: url(../images/product_sv.jpg);
    position: relative;
    margin-bottom: 20px;
}
.product_line ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.product_line ul li {
    width: 23%;
    margin: 0 2.666% 50px 0;
}
.product_line ul li:nth-child(4n){
    margin-right: 0;
}
.product_line ul li a figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
.product_line ul li h3 {
   border-bottom: none;
   font-size: 1.2rem;
   color: #13385f;
}
.product_line ul li figure{
    height: 250px;
}


/* product_details */
.product_details_contents {
    margin-bottom: 120px;
}
.product_details dl {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
}
.product_details dl dt {
	width: 50%;
}
.product_details dl dt figure{
    margin-bottom: 0;
}
.product_details dl dt figure img {
	width: 100%;
    height: 320px;
    object-fit: cover;
}
.product_details dl dd {
	width: 46%;
}
.product_details dl dd table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.product_details dl dd table th {
    width: 15%;
    font-weight: 700;
    text-align: left;
    padding-right: 1em;
    vertical-align: top;
}
.product-_etails dl dd table tr:first-child th,
.product_details dl dd table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}
.product_details dl dd table th, 
.product_details dl dd td {
    padding: 1.5em 0;
    border-bottom: 1px solid #c2c2c2;
}
.product_details dl dd table tr:first-child th,
.product_details dl dd table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}

/* recruit */
.recruit_sv {
    height: 300px;
    background-image: url(../images/recruit_sv.jpg);
    position: relative;
    margin-bottom: 20px;
}
.recruit ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 50px;
}
.recruit ul li {
    width: 45%;
    margin: 0 2.5%;
}
.recruit ul li figure img {
    width: 100%;
}
.recruit ul li div h3 {
    border-bottom: none;
}

/* recruit_list */
.recruit_list table {
	width: 100%;
    border-collapse: collapse;
    margin-bottom: 120px;
}
.recruit_list table th {
    width: 15%;
    font-weight: 700;
    text-align: left;
    padding-right: 1em;
    vertical-align: top;
}
.recruit_list table tr:first-child th,
.recruit_list table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}
.recruit_list table th, 
.recruit_list td {
    padding: 1.5em 0;
    border-bottom: 1px solid #c2c2c2;
}
.recruit_list table tr:first-child th,
.recruit_list table tr:first-child td {
    border-top: 1px solid #c2c2c2;
}

/* recruit_voice */
.recruit_voice dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
}
.recruit_voice dl dt {
    width: 36%;
}
.recruit_voice dl dd {
    width: 60%;
}
.recruit_voice_contents {
    margin-bottom: 120px;
}

/* news */
.news_sv {
    height: 300px;
    background-image: url(../images/news_sv.jpg);
    background-position: center;
    position: relative;
    margin-bottom: 20px;
}
.news_list .news-archive {
	margin-bottom: 40px;
}
.news_list .news-archive li {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 40px 0;
    border-bottom: 1px solid #c2c2c2;
}
.news_list .news-archive li:first-child {
	border-top: 1px solid #c2c2c2;
}
.news_list .news-archive li a{
    color: #000;
}
.news_list .news-archive li a:hover{
    text-decoration: underline;
}
.news_list .news-archive li time {
	display: block;
    width: 12.4%;
    font-weight: 700;
}

/* news_datails */
.news_details .date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 60px;
}
.news_details .date time {
    margin-right: 2em;
}
.news_details .edit {
    margin-bottom: 80px;
}
.news_details .news_details_btn {
    text-align: center;
}

/* contact */
.contact_sv {
    height: 300px;
    background-image: url(../images/contact_sv.jpg);
    position: relative;
    margin-bottom: 20px;
}
.contact_form table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #c2c2c2;
}
.contact_form table th {
    width: 20%;
}
.contact_form table th,
.contact_form table td {
    padding: 1.5em 0;
    text-align: left;
    border-bottom: 1px solid #c2c2c2;
}
.contact_form .required {
    display: inline-block;
    margin-left: 1em;
    background: #13385f;
    color: #FFF;
    padding: 5px 10px;
    font-weight: 700;
    line-height: 1.1;
}
.contact_form input,
.contact_form textarea {
    width: 70%;
    line-height: 1.8;
    padding: .3em;
    border: 1px solid #888;
}
.contact_form .btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 60px;
}
.contact_form .btns input[type="submit"] {
    max-width: 250px;
    width: 100%;
    height: 70px;
    background-color: #13385f;
    border: 1px solid #13385f;
    color: #FFF;
    font-weight: 700;
    cursor: pointer;
    margin-right: 10px;
}
.contact_form .btns input[type="submit"]:last-child{
    margin-right: 0;
}

/* topics */
.topics_list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.topics_list ul li {
    width: 22.3%;
    margin: 0 3.6% 50px 0;
}
.topics_list ul li:nth-child(4n) {
    margin-right: 0;
}

/* privacy */
.privacy_sv {
    height: 300px;
    background-image: url(../images/privacy_sv.jpg);
    position: relative;
    margin-bottom: 20px;
}
.privacy_policy div {
    margin-bottom: 60px;
}

/* 404 */
.not-found_sv {
    height: 300px;
    background-image: url(../images/not-found_sv.jpg);
    position: relative;
    margin-bottom: 20px;
}

/* ページネーション */
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #13385f;
	background-color: #FFFFFF;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border: thin solid #13385f;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #13385f;
}
.wp-pagenavi span.current{
	color: #fff;
	background-color: #13385f;
}

@media screen and (max-width: 1024px) {
    .inner{
        width: 90%;
    }
    header h1 {
        font-size: 24px;
        margin-left: 20px;
    }
    header ul {
        margin-right: 0;
    }
    header ul li{
        margin-right: 20px;
    }
    header ul li a {
        width: fit-content;
    }
    /* top-greeting */
    .top-greeting dl {
        flex-direction: column;
        font-size: 14px;
    }
    .top-greeting dt {
        width: 100%;
    }
    .top-greeting dd {
        width: 100%;
    }
    .top-business p {
        font-size: 14px;
    }
    .top-news .news-archive li{
        font-size: 14px;
    }
    .footer_contact p{
        font-size: 14px;
    }
}

@media screen and (max-width: 768px){
    .business_description_left{
        margin-bottom: 300px;
    }
    .business_description_right{
        margin-bottom: 300px;
    }
}

@media screen and (max-width: 768px) {
    main{
        padding-top: 50px;
    }
    .sp-block{
        display: block;
    }
    .pc-block{
        display: none;
    }
    header{
        height: 50px;
    }
    header h1 {
        font-size: 20px;
    }
    .drawer{
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 2000;
        width: 100%;
        height: 100vh;
        background-color: #000;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }
    .drawer ul{
        flex-direction: column;
        padding: 50px 0;
    }
    .drawer ul li{
        padding: 20px 0;
        margin-right: 0;
        border-bottom: 1px solid #eee;
    }
    .drawer ul li:first-child{
        border-top: 1px solid #eee;
    }
    .drawer ul li a{
        display: block;
        width: fit-content;
        margin: 0 auto;
        color: #FFFFFF;
    }
    h2{
        margin-bottom: 10px;
        font-size: 26px;
        line-height: 1.5;
    }
    .wrapper{
        margin-bottom: 60px;
    }
    .mainvisual{
        margin-bottom: 40px;
    }
    .mainvisual img{
        height: 40vh;
        object-fit: cover;
        object-position: center;
    }
    .mainvisual h2{
        font-size: 6.4vw;
    }
    .top-greeting{
        margin-bottom: 60px;
    }
    .top-business{
        padding: 60px 0;
        margin-bottom: 60px;
    }
    .top-news .news-archive li{
        flex-direction: column;
        padding: 16px 0;
    }
    .footer_contact{
        padding-left: 20px;
        padding-right: 20px;
    }
    .copyright{
        flex-direction: column;
    }
    .copyright p{
        margin: 4px 0;
    }
    .company_profile table{
        font-size: 14px;
        margin-bottom: 60px;
    }
    .company_profile table tr{
        border-top: 1px solid #c2c2c2;
    }
    .company_profile table tr:last-child{
        border-bottom: 1px solid #c2c2c2;
    }
    .company_profile table th{
        display: block;
        width: 100%;
        border: unset !important;
        padding: 12px 0 0;
    }
    .company_profile table td{
        display: block;
        width: 100%;
        border: unset !important;
        padding: 0 0 12px;
    }

    .access_map table{
        font-size: 14px;
        margin-bottom: 60px;
    }
    .access_map table tr{
        border-top: 1px solid #c2c2c2;
    }
    .access_map table tr:last-child{
        border-bottom: 1px solid #c2c2c2;
    }
    .access_map table th{
        display: block;
        width: 100%;
        border: unset !important;
        padding: 12px 0 0;
    }
    .access_map table td{
        display: block;
        width: 100%;
        border: unset !important;
        padding: 0 0 12px;
    }
    .access_map iframe{
        height: 260px !important;
    }
    .business h2{
        margin-bottom: 30px;
    }
    .business_description_left dl dt img{
        height: 250px;
        width: 100%;
        z-index: -1;
    }
    .business_description_left dl dd{
        width: 95%;
        padding: 20px;
        top: 70%;
        right: unset;
        left: 0;
        box-sizing: border-box;
    }
    .business_description_left dl dd h3{
        font-size: 22px;
        margin-bottom: 20px;
        line-height: normal;
        padding-bottom: 4px;
    }
    .business_description_left dl dd p{
        font-size: 14px;
    }
    .business_description_left{
        margin-bottom: 250px;
    }
    .business_description_right dl dt{
        z-index: -1;
    }
    .business_description_right dl dt img{
        height: 250px;
        width: 100%;
    }
    .business_description_right dl dd{
        width: 95%;
        padding: 20px;
        top: 70%;
        left: unset;
        right: 0;
        box-sizing: border-box;
    }
    .business_description_right dl dd h3{
        font-size: 22px;
        margin-bottom: 20px;
        line-height: normal;
        padding-bottom: 4px;
    }
    .business_description_right dl dd p{
        font-size: 14px;
    }
    .business_description_right{
        margin-bottom: 250px;
    }
    .product_line h2{
        margin-bottom: 30px;
    }
    .product_line ul{
        flex-direction: column;
    }
    .product_line ul li{
        width: 100%;
        margin-bottom: 0px;
    }
    .product_line ul li h3{
        text-align: center;
        margin-bottom: 20px;
    }
    .product_line figure{
        margin-bottom: 10px;
    }
    .product_details h2{
        margin-bottom: 30px;
    }
    .product_details_contents h3{
        font-size: 22px;
        line-height: 1;
    }
    .product_details dl{
        flex-direction: column;
    }
    .product_details dl dt{
        width: 100%;
    }
    .product_details dl dd{
        width: 100%;
    }
    .product_details dl dd table th{
        width: 70px;
        margin-right: 20px;
    }
    .contact_form table th, .contact_form table td{
        display: block;
        width: 100%;
        padding: 0;
        font-size: 14px;
    }
    .contact_form table th{
        border-bottom: none;
        margin-bottom: 10px;
        padding-top: 14px;
    }
    .contact_form table td{
        padding-bottom: 14px;
    }
    .contact_form input, .contact_form textarea{
        width: 100%;
        box-sizing: border-box;
    }
    .contact_form .required{
        font-size: 12px;
    }
    .contact_form h2{
        margin-bottom: 30px;
    }
    .contact_form .btns{
        margin-top: 0;
        flex-direction: column;
        justify-content: center;
    }
    .contact_form .btns input[type="submit"]{
        margin: 0 auto !important;
    }
    .contact_form .btns input[type="submit"]:first-child{
        margin-bottom: 10px !important;
    }
    .news_list h2{
        margin-bottom: 30px;
    }
    .news_list .news-archive li{
        flex-direction: column;
        font-size: 14px;
        padding: 14px 0;
    }

    .breadcrumb{
        margin-bottom: 60px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px){
    .business_description_left{
        margin-bottom: 390px;
    }
    .business_description_right{
        margin-bottom: 390px;
    }
}


/* ====================
drawer mneu
====================*/
.nav {
    display: none;
  }
  @media screen and (max-width: 768px) {
    .nav {
      display: block;
      overflow-x: hidden;
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      padding-top: 80px;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      z-index: 200;
      overflow-y: auto;
      overflow-y: scroll;
      opacity: 0;
      visibility: hidden;
      background-color: rgba(0, 0, 0, 0.8705882353);
    }
  }
  @media screen and (max-width: 768px) {
    .nav__inner {
      margin: 0;
      padding: 0;
      list-style: none;
      width: 80%;
      position: absolute;
      right: -40%;
      top: 0;
      background-color: #185191;
      height: 100vh;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
      padding-top: 50px;
    }
  }
  .nav__list {
    padding-left: 30px;
    padding-bottom: 80px;
    background-color: #185191;
  }
  @media screen and (max-width: 1024px) {
    .nav__item {
      padding: 22px 0;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid #366397;
    }
    .nav__item-ttl {
      display: block;
      color: #ffffff;
      padding-bottom: 18px;
      font-size: 36px;
      font-family: futura-pt-bold, sans-serif;
      font-weight: 700;
      font-style: normal;
      position: relative;
      -webkit-transform: translateY(-100px);
              transform: translateY(-100px);
    }
    .nav__item-ttl span {
      font-size: 14px;
      font-weight: normal;
      font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
      position: absolute;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .nav__item-sublist {
      opacity: 0;
      -webkit-transition: 1s;
      transition: 1s;
      color: #ffffff;
      margin-top: 20px;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
    }
    .nav__item-sublist li {
      padding: 6px 0;
      font-size: 12px;
      font-weight: bold;
    }
  }
  
  /* ====================
  hamburger
  ====================*/
  .hamburger {
    display: none;
  }
  @media screen and (max-width: 768px) {
    .hamburger {
      display: block;
      position: fixed;
      right: 20px;
      top: 10px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      z-index: 9999;
    }
    .hamburger__line {
      position: absolute;
      right: 0;
      width: 22px;
      height: 2px;
      background-color: #000000;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
    }
    .hamburger .border_black {
      background-color: #000000;
    }
    .hamburger__line--1 {
      top: 8px;
    }
    .hamburger__line--2 {
      top: 14px;
    }
    .hamburger__line--3 {
      top: 20px;
    }
  }
  
  /* ====================
  drawer open
  ====================*/
  @media screen and (max-width: 768px) {
    .nav_open .drawer {
      right: 0;
    }
    .nav_open .drawer {
      right: 0;
      -webkit-transition: all 0.4s;
      transition: all 0.4s;
    }
    .nav_open .nav__item-ttl {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      -webkit-transition: 1s;
      transition: 1s;
      opacity: 1;
    }
    .nav_open .nav__item:nth-child(2) .nav__item-ttl {
      -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s;
    }
    .nav_open .nav__item:nth-child(3) .nav__item-ttl {
      -webkit-transition-delay: 0.2s;
              transition-delay: 0.2s;
    }
    .nav_open .nav__item:nth-child(4) .nav__item-ttl {
      -webkit-transition-delay: 0.3s;
              transition-delay: 0.3s;
    }
    .nav_open .nav__item:last-child .nav__item-ttl {
      -webkit-transition-delay: 0.4s;
              transition-delay: 0.4s;
    }
    .nav_open .nav__item-sublist {
      opacity: 1;
      -webkit-transition-delay: 1s !important;
              transition-delay: 1s !important;
      -webkit-transition: 1s;
      transition: 1s;
    }
    .nav_open .hamburger__line {
      background-color: #ffffff;
    }
    .nav_open .hamburger__line--1 {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      top: 14px;
    }
    .nav_open .hamburger__line--2 {
      width: 0;
      opacity: 0;
    }
    .nav_open .hamburger__line--3 {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 14px;
    }
  }