@charset "utf-8";
/*--------------------------------------------------- */
body { line-height: 1.6; color: #333; font-size: 16px; font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif; font-smooth:always;  background: #fff; box-sizing: border-box; overflow-x: hidden;}
a{text-decoration: none; color:#666;}
a:hover{text-decoration: underline; color:#333;}
/*------------------base.css-------------------*/
.container { width: 100%; margin: 0 auto; overflow-x: hidden;}
/*------------------style.css-------------------*/
/*h1, h2, h3 { text-align: center; }*/
h1 { margin: 30px auto 20px; }
section { margin-bottom: 120px; }
.footer { text-align: center; padding: 20px;}
.footer p { text-align: center; text-decoration: none;}
.footer p a{text-decoration: none; color:#333;}
/*------------------COMMON------------------*/
html, body {
  margin: 0;
  padding: 0;
}
br.sponly_br{
display:none;
}
br.pconly_br{
display:block;
}
.container {
width: 100%;
overflow: hidden;
}
/*fadein*/
.fadeInBlock {
  display: grid;
}
.fadeInout {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s ease-out;
}
.fadeInout.show {
  opacity: 1;
  transform: translateY(0);
}
#link{
display:block;
margin:150px auto 30px;
}
.link_table{
    display:flex;
    width:250px;
    margin:auto;
}
.link_table .link_td{
    display:block;
    margin:auto;
    text-align:center;
}
.link_table .link_td img{
    width:65%;
}
a:hover{
    opacity: 0.5;
    transition : 0.5s;
}
/*------------------HEADER------------------*/
.header{
disply:block;
margin:60px auto;
}
.header img{
display:block;
width:200px;
}
/*------------------TITLE------------------*/
.title_wrap{
    display:flex;
    flex-direction:row-reverse;
    align-items:stretch;
    width:100%;
}
.title_text{
    flex:0 0 45%;
    padding:50px 3% 30px 8%;
    background:#efefef;
    box-sizing:border-box;
    z-index:10;
}
.title_img{
    flex:1;
    overflow:hidden;
}
.title_img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

.top_logo {
    font-family:var(--serif);
    font-size:18px;
	font-family: "Anton", sans-serif;
  font-weight: 100;
  font-style: normal;
}
h1 {
    margin:20px 0 25px;
	font-size:80px;
	line-height:1;
	font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.top_text p{
font-size:16px;
line-height:1.5;
}
.top_text p span{
display:block;
font-size:22px;
font-weight:600;
line-height:2;
}
/*------------------Article------------------*/
p span.articlebox_title{
font-size:30px;
font-weight: bold;
display:block;
margin:50px 10px 20px;
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
}
p span.articlebox_Speech{
font-weight: bold;
display:block;
margin:20px 0px 10px;
}
p span.articlebox_Pattern{
font-size:20px;
font-weight: bold;
display:block;
margin:20px 0px 10px;
}
.articlebox1_contents p,.article2_contents p{
font-size:16px;
}
.imgbox{
display:block;
margin:30px auto;
width:750px;
}
.imgbox img{
width:100%;
}

.articlebox1{
display:block;
width:800px;
margin:20px auto;
}
.articlebox1_contents{
display:block;
}

.articlebox2{
display:block;
width:1000px;
margin:20px auto;
}
.article2_intro{
    max-width:900px;
    margin:0 auto 30px;
}
.article2_contents{
    display:flex;
    align-items:center;
    gap:80px;
    margin:50px 0;
}
.article2_contents.reverse{
    flex-direction:row-reverse;
}
.article_text{
    flex:1;
}
.article_img{
    flex:1;
}
.article_img img{
    width:100%;
    height:auto;
    display:block;
}
/*-----------------ITEM------------------*/
.item_information{
    max-width:100%;
    margin:0 auto;
	background:#efefef;
	padding:50px 15% ;
}
.item_information2{
    max-width:100%;
    margin:0 auto;
	padding:50px 15% ;
}
.item_title{
  font-size:50px;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  width:100%;
}
.pattern_title{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  width:100%;
}
.pattern_title p{
  font-size:26px;
}
.pattern_title p span{
display:block;
margin:10px 5px;
  font-size:16px;
}
.item_list{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.item_box{
    width:calc((100% - 80px) / 5);
}
.item_name{
    margin-top:15px;
    font-size:14px;
    line-height:1.8;
}
.item_link{
    color:#666;
    text-decoration:none;
    display:block;
}
.item_link:hover{
    color:#333;
    text-decoration:underline;
}
.item_img{
    position:relative;
}
.item_img img{
    display:block;
    width:100%;
    height:auto;
    transition:opacity .5s ease;
}
.hover_img{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
.item_link:hover .hover_img{
    opacity:1;
}
.item_link:hover .main_img{
    opacity:0;
}
/*---------------SP------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 798px) {
html{
font-size: calc(100vw / 40);
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
br.sponly_br{
display:block;
}
br.pconly_br{
display:none;
}
.container {
width: 100%;
overflow: hidden;
}
/*fadein*/
.fadeInBlock {
  display: grid; /*wrapper*/
}
.fadeInout {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s ease-out;
}
.fadeInout.show {
  opacity: 1;
  transform: translateY(0);
}
/*--------------------------SP-HEADER--------------------------SP-*/
.header{
disply:block;
margin:20px auto;
}
.header img{
display:block;
width:200px;
}
/*--------------------------SP-TITLE--------------------------SP-*/
.title_wrap{
  flex-direction: column;
  gap: 0;
  width:100%;
}
.title_text{
padding:30px 5% 30px 5%;
  align-self:center;
  flex: 1;
  text-align: left;
  /*border:solid 1px #000;*/
}
.title_img{
 padding:20px 0 0 0;
 width: 100%;
 }
.title_img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

.top_logo {
    font-family:var(--serif);
    font-size:1.8rem;
	font-family: "Anton", sans-serif;
  font-weight: 100;
  font-style: normal;
}
h1 {
    margin:20px 0 25px;
	font-size:6rem;
	line-height:1;
	font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.top_text p{
font-size:1.6rem;
line-height:1.5;
}
.top_text p span{
display:block;
font-size:2rem;
font-weight:600;
line-height:2;
}
/*------------------------SP-ARTICLE-------------------------SP-*/
p span.articlebox_title{
font-size:2.5rem;
font-weight: bold;
display:block;
margin:30px 5px 10px;
font-family: "Anton", sans-serif;
font-weight: 400;
font-style: normal;
}
p span.articlebox_Speech{
font-weight: bold;
display:block;
margin:15px 0px 5px;
}
p span.articlebox_Pattern{
font-size:1.8rem;
font-weight: bold;
display:block;
margin:15px 0px 5px;
}
.articlebox1_contents p,.article2_contents p{
font-size:1.6rem;
}
.imgbox{
display:block;
margin:20px auto;
width:100%;
}
.imgbox img{
width:100%;
}

.articlebox1{
display:block;
width:90%;
margin:20px auto;
}
.articlebox1_contents{
display:block;
}

.articlebox2{
display:block;
width:95%;
margin:20px auto;
}
.article2_intro{
    max-width:900px;
    margin:0 auto 30px;
}
.article2_contents{
    display:block;
    flex-direction:column;
    align-items:center;
    gap:80px;
    margin:50px 0;
}
.article2_contents.reverse{
    flex-direction:row-reverse;
}
.article_text{
    order:2;
	width:100%;
}
.article_img{
    order:1;
	width:80%;
    display:block;
	margin:30px auto 60px;
}
.article_img img{
    width:100%;
    height:auto;
}

/*------------------------SP-ITEM---------------------------SP-*/
.item_information{
    max-width:100%;
    margin:0 auto;
	background:#efefef;
	padding:30px 3% ;
}
.item_information2{
    max-width:100%;
    margin:0 auto;
	padding:30px 3% ;
}
.item_title{
  font-size:2.5rem;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  width:100%;
}
.pattern_title{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
  width:100%;
}
.pattern_title p{
  font-size:2rem;
}
.pattern_title p span{
display:block;
margin:10px 5px;
  font-size:1.6rem;
}
.item_list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.item_box{
    width:48%;
}
.item_name{
    margin-top:15px;
    font-size:1.4rem;
    line-height:1.8;
}
.item_link{
    color:#666;
    text-decoration:none;
    display:block;
}
.item_link:hover{
    color:#333;
    text-decoration:underline;
}
.item_img{
    position:relative;
}
.item_img img{
    display:block;
    width:100%;
    height:auto;
    transition:opacity .5s ease;
}
.hover_img{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
.item_link:hover .hover_img{
    opacity:1;
}
.item_link:hover .main_img{
    opacity:0;
}
}