@charset "UTF-8";

/* PCでは非表示 */
.pc_no {
  display: none;
}

.content {
  width: min(90%, 1000px);
  margin-left: auto;
  margin-right: auto;
}

.content-m {
  width: min(90%, 900px);
  margin-left: auto;
  margin-right: auto;
}

.content-s {
  width: min(90%, 768px);
  margin-left: auto;
  margin-right: auto;
}

/*2カラム*/
.column-x2{
  width: min(90%, 1000px);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 50px;
}
.column-x2 .column-x2-01{}
.column-x2 .column-x2-02{}


article{margin-top: 100px;}




/*------------------------------------------------*/
/*------------------- footer ---------------------*/
/*------------------------------------------------*/
.footer .inner{
background-color: var(--color-black);
display: grid;
grid-template-columns: 30% 1fr;
gap: 0;
color: var(--color-white);
margin-top: 150px;
}

/* logo */
.footer .inner .box01{
grid-row: 1 / 2;
grid-column: 1 / 2;
border: 1px solid;
border-width: 0 1px 0 0;
padding: 20px;
text-align: right;
}
.footer .inner .box01 img{
width: min(100% ,100px);
}

/* lang mail */
.footer .inner .box02{
grid-row: 2 / 3;
grid-column: 1 / 2;
border: 1px solid;
border-width: 1px 1px 0 0;
padding: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
}
.footer .inner .box02 a{
margin: 0 7%;
transition: 0.2s ease-out;
}
.footer .inner .box02 a:hover{
opacity: 0.5;
}
.footer .inner .box02 a.box02-item01{}
.footer .inner .box02 a.box02-item02{}
.footer .inner .box02 a.box02-item01 img{width:25px;}
.footer .inner .box02 a.box02-item02 img{width:25px;}


/* 内容 */
.footer .inner .box03{
grid-row: 1 / 3;
grid-column: 2 / 3;
padding: 20px;
}
.footer .inner .box03 .box03_inner{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.footer .inner .box03 .box03_inner .box03_title{
font-size: var(--s22);
font-weight: 400;
letter-spacing: 3px;
margin-right: 10px;
}
.footer .inner .box03 .box03_inner a.box03_link{
display: block;
width: 20px;
margin: 0 10px -5px 10px;
}
.footer .inner .box03 .txt{
margin-right: 20px;
}

.footer .inner .box03 a.box03_tel{
display: inline-block;
color: var(--color-white);
}
.footer .inner .box03 small{
display: block;
margin-top: 5px;
}



/*------------------------------------------------*/
/*----------------- ページ内メニュー -------------------*/
/*------------------------------------------------*/

.page_menu .page_menu_list{
background-color: rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.page_menu .page_menu_list .item a{
display: block;
color: var(--color-white);
padding:0.5rem 2rem 0.5rem 1.5rem;
margin: 10px;
transition: 0.3s ease-in-out;
position: relative;
}
.page_menu .page_menu_list .item a::after{
transition: 0.2s ease-out;
content: "";
display: block;
background-image: url(../img/icon_arrow_down-right.svg);
background-position: center;
background-size: cover;
width: 15px;
height:15px;
position: absolute;
bottom: 7px;
right: 7px;
}
.page_menu .page_menu_list .item a:hover{
background-color: var(--color-white);;
color: var(--color-black);
}















/*------------------------------------------------*/
/*----------------- ページTOP -------------------*/
/*------------------------------------------------*/
.p_top a{
position: fixed;
width: 50px;
height: 50px;
z-index: 40;
bottom: 20px;
right: 20px;
padding: 10px;
outline: 1px solid var(--color-white);
background-color: var(--color-black);
}

.p_top a img{
clip-path: inset(0px 0px 0 0px);
animation: mask_down_ptop 5s ease-in-out infinite;
}
@keyframes mask_down_ptop {
80% {clip-path: inset(0px 0px 0px 0px);}
100% {clip-path: inset( 0px 0px 100% 0px);}
}