@charset "UTF-8";

.pc {display: block;}
.sp {display: none;}

@media screen and (max-width: 480px) {
.pc {display: none;}
.sp {display: block;}
}
/*------------------------------------*/



.mb20{margin-bottom: 20px;}

.dummy {
color: rgba(248,0,4,1.00);
/*text-decoration: line-through; */
}

* {
margin: 0;
padding: 0;

}

*, *::before, *::after {
box-sizing: border-box;
}

html {
font-size: 62.5%;
}

body {
padding-bottom: 30px;
font-weight: normal;
font-size: 1.6rem;
line-height: 1;
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}

header {
line-height: 1.5;
}

main {
display: block;
}

h1, h2, h3, h4, h5, h6 {
font-size: 1em;
font-weight: normal;
font-style: normal;
line-height: 1.5;
}

li {
list-style: none;
}

a {
text-decoration: none;
color: inherit;
 transition: 0.5s; /* マウスカーソルを外すとき */
 }

a:hover {
    opacity: 0.5;
    transition: 0.5s; /* マウスカーソルを載せるとき */
    }

img{
width: 100%;
}




@media screen and (min-width: 481px) {
body {
padding-bottom: 0;
}
a.tel {
pointer-events: none;
}
}
/*------------------------------------*/



button {
padding: 0;
outline: none;
border: none;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}

.img100 {
width: 100%;
height: auto;
vertical-align: bottom;
}

 .container{
 margin-left: 20px;
 margin-right: 20px;
 }

/*--------------------------------------------------------------------*/


.bg{
background: url("../../img/common/head_image.jpg") top center no-repeat;
}

.main_ttl{
letter-spacing: 10px;
font-size: 1.8em;
color: #fff;
text-align: center;
margin-top: 150px;
}

.main_ttl p{
letter-spacing: 5px;
font-size: 0.8em;
}

.hr1 {
  border-top: 1px solid #fff;
  width: 150px;
  margin: 5px auto 10px;
}

.content{
width: 100%;
max-width: 1200px;
margin: 0 auto;
margin-top: 100px;
}

.content_ttl{
margin-bottom: 30px;
}
.content_ttl h2{
background: #000e56;
text-align: center;
color: #fff;
font-size: 1.6em;
font-weight:600;
letter-spacing: 10px;
padding: 10px 0;
}
/*--------------------------------------*/
@media screen and (max-width: 768px) {
/*--------------------------------------*/
.content_ttl h2{
background: #000e56;
text-align: center;
color: #fff;
font-size: 1.2em;
font-weight:600;
letter-spacing: 10px;
padding: 10px 0;
}
}


.content_ttl p{
text-align: center;
padding: 10px 0;
font-weight:600;
font-size: 1.2em;
color: #000e56;
}

/*--------------------------------------------------------------------*/

.header_inner, .header_menu {
display: none;
}

.header {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
height: auto;
transition: transform 0.25s linear;
background: #000;
opacity: 1;
border-bottom: 1px solid #d5d5d5;
}

.header.scroll {
transform: translateY(-100%);
}

.header_sp {
width: 100%;
height: 60px;
}


.header_sp_inner {
width: 100%;
height: 60px;
z-index: 10;
background: #000;
opacity: 1;
}

.header_sp_logo {
padding: 8px;
width: 212px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
}


.header_sp_btn {
width: 50px;
height: 50px;
display: block;
border-left: none;
position: absolute;
top: 0;
right: 0;
}

.header_sp_btn_spn1, .header_sp_btn_spn2, .header_sp_btn_spn3 {
display: block;
position: absolute;
width: 30px;
height: 2px;
background: #fff;
left: 10px;
}

.header_sp_btn_spn1 {top: 18px;}
.header_sp_btn_spn2 {top: 28px;}
.header_sp_btn_spn3 {top: 38px;}

.header_sp_menu {
width: 100%;
position: absolute;
top: 100%;
left: 0;
background: #FFF;
z-index: -999;
transform: translateY(-100%);
transition: transform 0.5s ease-out;
}

.header_sp_menu_ul {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #FFF;
border-bottom: 1px solid #b4b4b4;
}

.header_sp_menu_ul::after {
content: "";
width: 50%;
height: 0;
display: block;
order: 1;
}

.header_sp_menu_li {
width: 100%;
width: 50%;
border-bottom: 1px solid #b4b4b4;
}

.header_sp_menu_li:nth-of-type(odd) {
border-right: 1px solid #b4b4b4;
}

.header_sp_menu_a {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
padding: 20px 10px;
text-align: center;
}

.header_sp.open .header_sp_btn_spn1 {
top: 25px;
transform: rotate(45deg);
}

.header_sp.open .header_sp_btn_spn2 {
transform: scaleX(0);
}
.header_sp.open .header_sp_btn_spn3 {
top: 25px;
transform: rotate(-45deg);
}
.header_sp.open .header_sp_menu {
transform: none;
}

.go-top {
display: block;
position: fixed;
width: 50px;
height: 50px;
border: 2px solid #746430;
color: #736357;
font-size: 12px;
line-height: 1;
text-align: center;
bottom: 54px;
right: 5px;
background: #FFF;
padding-top: 30px;
transform: translateX(200px);
transition: transform 1s ease-out;
}

.go-top.show {
transform: none;
}

.go-top::before {
content: "";
width: 20px;
height: 20px;
border-top: 2px solid #746430;
border-right: 2px solid #746430;
position: absolute;
top: 12px;
left: 13px;
transform: rotate(-45deg);
}

footer{width: 100%;
color: #fff;
}
/*---------------------------------------------------*/
@media screen and (min-width: 768px) {
/*---------------------------------------------------*/
.main {
}
.header {
height: auto;
transition: transform 0.25s linear;
background: #000;
opacity: 0.6;
border-bottom: 1px solid #d5d5d5;
}
.header.scroll {
transform: translateY(-100%);
}
.header_sp {
display: none;
}
.header_inner {
width: 100%;
max-width: 1200px;
display: flex;
height: 80px;
margin: 0 auto;
}
.header_logo {
display: flex;
justify-content: center;
align-items: center;
padding: 0 6px;
width: 270px;
}
.header_nav {
padding: 0 25px;
}
.header_menu {
text-align: right;
color: #fff;
width: 100%;
display: flex;
justify-content: flex-end;
}
.header_menu ul {
display: flex;
justify-content: space-between;
align-items: center; 
}
.header_menu li {
border-left: 1px solid #d5d5d5;
padding: 100px auto;
}
.header_menu li:last-child {
border-right: 1px solid #d5d5d5;
}
.header_menu_border {
width: 1px;
height: 60px;
background: #d5d5d5;
display: block;
}
.header_menu_a {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 60px;
text-align: center;
padding-top: 6px;
}

.header_menu_a.current {
pointer-events: none;
}

footer{width: 100%;
background: #000e56;
color: #fff;
}

nav{
max-width: 1200px;
margin: 0 auto;
display: flex;
}

.f_logo img{
padding: 10px 0;
width: 250px;
}

nav .f_menu{
max-width: 1200px;
margin: 0 auto;
display: flex;
}

.f_menu {
  gap: 1em;
  padding: 1em 0 4em;
}
.f_menu .sub-menu {
  margin-top: 0.25em;
  display: grid;
  gap: 0.15em;
}
.f_menu .sub-menu > li {
  margin-left: 0.75em;
}
.f_menu .sub-menu > li a {
  padding: 0 0.75em;
  position: relative;
  font-size: 13px;
}
.f_menu .sub-menu > li a::before {
  content: "";
  width: 5px;
  height: 1px;
  background-color: var(--color_footer_text);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}




.copy{
text-align: center;
background: #fff;
color: #000;
height: 50px;
line-height: 50px;
}
}