@charset "UTF-8";
/*
Theme Name:ATELIER PON theme
Author: ATELIER PON
Description: ATELIER PON theme.
Version: 1.0
*/

*{
 margin: 0;
 padding: 0;
}

body{
word-wrap: break-word;

}


html {
  scroll-behavior: smooth;
  font-size : 100%;
  line-height : 1.5;
  color: #383838;
}

h1,h2,h3,h4,h5,h6 {
 margin-bottom : 1em;
 font-family: toppan-bunkyu-midashi-go-std, sans-serif;
font-style: normal;
font-weight: 900;
}

h1 {
font-size : 36px; 
line-height : 1.2;
} /* 48px */

h2 {
font-size : 24px;
line-height : 1.6;
font-weight: normal;
letter-spacing:0.1em;
} /* 48px */

h3 {
font-size : 24px;
line-height : 1.4;
font-weight: normal;
letter-spacing:0.1em;
} /* 24px */



ul, ol {
	  list-style : none;
	  }
img { 
         vertical-align : middle;
         max-width: 100%;
         height: auto;
         margin-bottom:0;
         padding-bottom: 0;
         }
figure{
         margin-bottom:0;
         padding-bottom: 0;
}
p{
    line-height: 1.8em;
    letter-spacing:0.1em;
}


body{
font-family: kozuka-gothic-pr6n, sans-serif;
font-style: normal;
font-weight: 200;
}


a{
 text-decoration: none;
 color: #383838;
 transition: 0.4s ease-in-out;  
}

a:hover {  
    opacity: 0.5;  
    filter: alpha(opacity=60);  
} 

img{
width: 100%;
}

/* text */

.left{
 text-align: left;
}

.right{
 text-align: right;
}

.center{
 text-align: center;
}

.bold{
 font-weight: bold;
}


.small{
 font-weight: normal;
 font-size: 0.8em;
}

.pc{
display:none;
}

/*flex*/

.flex_container_sp{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}



.flex_center{
 justify-content: center;
  align-items: center;
}

.flex_re{
flex-direction:row-reverse
}

.flex_bottom{
 align-items: flex-end;
}

.flex_half_sp{
width: 46%;
margin: 2%;
box-sizing: border-box;
}

.flex_3_sp{
width: 31%;
margin: 1%;
box-sizing: border-box;
}


/*nav*/



/*header*/

header{
background-image:url(images/bg_box1.jpg);
background-position:left top;
background-repeat:no-repeat;
background-size:150px 150px;
margin-bottom:0;
}



.header_in{
padding:10em 2em 0em 2em;
max-width:280px;
margin-left: auto;
margin-right:auto;
}

.header_in h1{
margin-bottom:0.3em;
}


.sub_header h1{
max-width:250px;
padding:4em 0.5em 1em 0.5em;
height:100px;
}

p.date{

margin-bottom:0.5em;
}

p.access{
font-weight:bold;
}

p.access span{
font-weight:normal;
color:#878787;
font-size:0.8em;
}

p.map {
  background: #5dc2de;
  padding: 1em;
  font-size: 0.7em;
  width: 30px;
  height: 30px;
  border-radius: 200px;
  text-align: center;
  
  display: flex;             /* Flexboxを使用 */
  justify-content: center;   /* 水平方向中央 */
  align-items: center;       /* 垂直方向中央 */
}

.map_left{
margin-right:1em;
}




p.map a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}


.btn{
position:fixed;
bottom:0;
z-index:999;
width:100%;
}

.btn1{
font-size:1em;
font-weight:bold;
width:42%;
margin-left: 2%;
margin-right: 1%;
}

.btn2{
font-size:1em;
font-weight:bold;
width:52%;
margin-left: 1%;
margin-right: 2%;
}

.btn li a{
border-radius:5px 5px 0px 0px;
background:#a3a3a3;
padding:0.5em 1em;
display:block;
color: #fff;
font-size:0.9em;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.btn li.btn2 a{
background:#e9639e;
}

.btn li span{
font-size:0.5em;

}


.btn li span.btnin{
font-size:0.9em;
border:1px solid #fff;
padding:0.1em 1em;
margin-left:0.5em;
}




/*main*/

.box_in{
padding:0em 2em 6em 2em;
}




h2.bg_title{
margin-left: 0.3em;
padding:1em 1.5em 1em 1.5em;
background-position:left center;
background-repeat:no-repeat;
background-size:80px 80px;
margin-bottom:0;

}

h2.bg_title1{
background-image:url(images/bg1.jpg);
}

h2.bg_title2{
background-image:url(images/bg2.jpg);
}

h2.bg_title3{
background-image:url(images/bg3.jpg);
}

h2.bg_title4{
background-image:url(images/bg4.jpg);
}



.title-with-triangle {
  display: flex;
  justify-content: center; /* 中央揃え */
  align-items: center;     /* 垂直方向中央 */
  gap: 1em;                /* 三角と文字の間隔 */
  margin: 2em 0;
}

.title-with-triangle h2 {
  margin: 0;
  font-size: 1.5em;
  font-weight: bold;
  color: #2b1e1e;
}

.triangle {
  width: 20px;  /* 必要に応じて調整 */
  height: auto;
}


.flex_3{
width:46%;
margin:2%;
box-sizing:border-box;
}

.exhibitor_box .ex_img{
margin-bottom:0.5em;
}

.exhibitor_box h3{
font-weight:normal;
font-size:0.9em;
text-align:center;
}

.concept_box {
max-width:90%;
margin-left: auto;
margin-right:auto;
}

.box p{
font-size:0.9em;
}

.container{
padding-top:20em;
background-image:url(images/bg_box2.jpg);
background-position:right top;
background-repeat:no-repeat;
background-size:350px 350px;
margin-bottom:0;
}


.container_in{
padding-bottom:20em;
background-image:url(images/bg_box3.jpg);
background-position:left bottom;
background-repeat:no-repeat;
background-size:400px 400px;
margin-bottom:3em;
}


.exhibitor_box .ex_img{
width:60%;
margin-left: auto;
margin-right:auto;
}

/*page*/
.catalog_box h3{
font-size:1.3em;
}



/*footer*/
footer{
padding-top:16em;
padding-bottom:10em;
background-image:url(images/bg_box4.jpg);
background-position:right top;
background-repeat:no-repeat;
background-size:400px 400px;
margin-bottom:0;

}

footer h1{
max-width:220px;
margin-top:1em;
margin-left: auto;
margin-right:auto;
}

/*page*/
.page_box .box{

padding:0em 2em 6em 2em;


}

.page_box .box h1{
font-size:1.8em;
margin-top:1em;
border-bottom:1px dotted #ccc;
padding-bottom:0.3em;
}

.page_box .box .ex_img{
max-width:60%;
margin-left: auto;
margin-right: auto;
}

.page_box .box h2{
font-size:1.3em;
margin-top:5em;
margin-bottom:0.5em;
}

.page_box .box p{
margin-bottom:2em;
}

.page_box_in{
margin-bottom:3em;
}

p.ct_btn {
font-size:0.9em;
  margin-top: 2em;
  line-height:1.2em;
}

p.ct_btn a {
  display: block;
  width: fit-content;
  background: black;
  color: #fff;
  padding: 0.5em 1.5em;
  border-radius: 100px;
  text-decoration: none;
  margin: 0 auto;
  text-align: center;
}

.sns figure{
width:42%;
margin:4%;
}

.page_box .sns_box h2{
margin-top:1em;
}

.sns_box{
text-align:center;
border:8px solid #ccc;
padding:1em 2em;
box-sizing:border-box;
}

.sns{
max-width:100px;
margin-left: auto;
margin-right: auto;
margin-bottom:2em;
}
.sns_box h2{
border-bottom:1px dotted #ccc;
padding-bottom:0.5em;
}

.sns_box p.shopinfo{
border-bottom:1px dotted #ccc;
padding-bottom:0.5em;
text-align:left;
}


@media screen and (min-width: 769px){

.flex_container_pc{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

.flex_half_pc{
width:46%;
margin:2%;
}


.btn{
position:fixed;
top:0;
right:1em;
width:390px;
}

.btn1{
font-size:1.1em;
}

.btn2{
font-size:1.1em;

}

.btn li a{
border-radius:0px 0px 5px 5px;
}




.header_in{
max-width:360px;
margin-left: auto;
margin-right:auto;
}

.box1, .box2, .box3, .box4{
max-width:500px;
}

.box2{
margin-left:20%;
}

.box3{
margin-left:40%;
}

.box4{
margin-left:5%;
}


.flex_3{
width: 29%;
margin: 2%;
box-sizing: border-box;
}

.pc_box{

background-image:url(images/bg_main2.png);
background-position:left top;
background-repeat:no-repeat;
background-size:200px 200px;
margin-bottom:0;
}


.container{
margin-top:10em;
padding-top:25em;
background-image:url(images/bg_pc1.jpg);
background-size:contain;
}


.container_in{
padding-bottom:20em;
background-image:url(images/bg_pc2.jpg);
background-size:contain;
}


p.ct_btn{
font-size:1em;
}



p.ct_btn span{
font-size:0.9em;
}

.sub_header_in{
max-width:800px;
margin-left: auto;
margin-right: auto;
}

.sub_header_in h1{
padding-left:0;
height:200px;
max-width:400px;
}

.page_box .page_box_in{
max-width:800px;
margin-left: auto;
margin-right: auto;

}


.page_box .page_box_in p{
margin-left:0;
}

.page_box .page_box_in p.mg{
margin-left:2em;
}





footer{
padding-top:16em;
padding-bottom:10em;
background-image:url(images/bg_pc3.jpg);
background-position:right top;
background-repeat:no-repeat;
background-size:contain;
margin-bottom:0;

}





}


@media screen and (min-width: 1024px){

header{

background-size:280px 280px;

}


.header_in{
padding-top:18em;
max-width:550px;
}

p.access br{
display:none;
}

p.access{
font-size:1.25em;
padding-top:0.7em;
}
p.map {
  font-size: 1em;
  }
  
  
.box1, .box2, .box3, .box4{
max-width:650px;
}
  
  .box h2{
font-size:2.2em;
}


.box p{
font-size:1.2em;
margin-left: 2em;
}

.triangle {
  width: 40px;  /* 必要に応じて調整 */
  height: auto;
}



.container{
margin-top:7em;
padding-top:35em;
background-image:url(images/bg_pc1.jpg);
background-size:1200px;
}

.pc_box{

background-size:350px 350px;

}



.container_in{
padding-bottom:30em;
background-size:1200px;
}


.flex_3{
width:21%;
margin:2%;
}

.exhibitor_box{
max-width:1000px;
margin-left: auto;
margin-right: auto;
}

/*footer*/

footer{
padding-top:25em;
padding-bottom:10em;
background-size:1100px;

}

footer h1{
max-width:370px;

}


}



@media screen and (min-width: 1400px){


.container_inner{
max-width:1500px;
margin-left: auto;
margin-right:auto;
}

.box1, .box2, .box3, .box4{
max-width:50%;
}

.box2{
margin-left:30%;
}

.box3{
margin-left:50%;
}

.box4{
margin-left:15%;
}


}

/*animation*/
.animation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.animation.show {
  opacity: 1;
  transform: translateY(0);
}

/*swing*/
.ex_img:hover {
  animation-play-state: paused;
}

.ex{
text-align:center;}

@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }

  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.ex_img {
  display: inline-block;
  transform-origin: top center;
  animation-name: swing;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* モーダル背景 */
.modal_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 2vh;
  box-sizing: border-box;
  overflow: auto;
}

.modal_overlay.show {
  opacity: 1;
}

.modal_overlay img {
  max-width: 90vw;       /* 横幅は画面の90%まで */
  max-height: 90vh;      /* 高さも画面の90%まで */
  width: auto;           /* 縦横比を維持 */
  height: auto;          /* 縦横比を維持 */
  border-radius: 8px;
  box-shadow: 0 0 20px #000;
  cursor: pointer;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.modal_overlay.show img {
  transform: scale(1);
}