@charset "UTF-8";
@import url("html5reset-1.6.1.css");
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&display=swap');

/* レイアウト */

*{
line-height:150%;
}

body{
color:#333;
background-color:#E5E4E2;
font-family: 'Halant','Klee One',YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',  'serif';
}

.base{
margin:0 auto;
max-width:1500px;
}

.header{
padding:10px;
text-align:center;
margin:0 auto;
background-color:#fff;
width:80%;
box-shadow: 0px 0px 0px 9px #fff,0px 0px 0px 11px;
border-width:1px;
border-style:solid;
}

.footer{
padding:10px;
text-align:center;
margin-top:10px;
}

.work{
padding:10px;
margin:0px 5px;
width:50%;
margin-top:20px;
}

.subwork{
padding:10px;
margin:5px;
width:45%;
background-image:url(bg.jpg);
background-size:cover;
background-position:center;
border-width:1px;
border-style:solid;
height:95vh;
}

.subwork2{
height:60%;
}

.menu{
margin:30px 0px;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
font-family: 'Cinzel', serif;
}

.box{
margin:0px 5px;
display:flex;
flex-direction:row-reverse;
}

img
{
max-width:100% ;
height:auto ;
}


/* ↓タグ↓ */

h1{
font-size:150%;
font-weight:normal;
font-family: 'Cinzel', serif;
}

h2{
font-size:80%;
font-weight:normal;
margin:10px;
}

h3{
font-size:130%;
font-weight:normal;
text-align:center;
margin:20px 0px;
font-family: 'Cinzel', serif;
}

h3 span {
display:block;
margin-top:0px;
color:#888;
font-size:60%;
}

h4{
font-size:100%;
font-weight:normal;
margin:15px 0px;
border-width:0px 0px 1px 0px;
border-style:solid;
border-color:#ccc;
font-family: 'Cinzel', serif;
}

h4:first-letter{
font-size:130%;
color:#8B8680;
}

h5{
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
font-size:90%;
font-weight:normal;
margin:10px 0px;
color:#8B8680;
}

h6{
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
font-size:85%;
font-weight:normal;
background-color:#F4F0EC;
border-radius:4px;
margin: 20px; /* 上下左右に20pxのマージンを設定 */ 
padding: 15px; /* 上下左右に10pxのパディングを設定 */
}

a:link{
color:#7851A9;
text-decoration:none;
}

a:visited{
color:#7851A9;
text-decoration:none;
}

h1 a:link{
    color:#333;
}

h1 a:visited{
    color:#333;
}

ol{
margin:10px 0px;
}

address{
font-size:75%;
font-family: 'Halant','Klee One',YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',  'serif';
}

.item{
background-color:#fff;
text-align:center;
margin:5px;
padding:0px 5px;
border-radius:4px;
}

/* GALLERY */
.gallerylist {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 40px 0;
}

.gallerylist__item {
width: calc((100% - 80px) / 5);
height: auto;
}

@media screen and (max-width: 1180px) {
  .gallerylist__item {
    width: calc((100% - 60px) / 4);
  }
}
@media screen and (max-width: 767px) {
  .gallerylist__item {
    width: calc((100% - 40px) / 3);
  }
}
@media screen and (max-width: 520px) {
  .gallerylist__item {
    width: calc((100% - 20px) / 2);
  }
}

.gallerylist__item a {
position: relative;
width: 100%;
display: block;
}

.gallerylist__item a::before {
content: "";
display: block;
padding-top: 100%; /*100%=親要素の横幅*/
}

.gallerylist__item a img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}

/* ↓classタグ↓ */

.ul {
margin: 20px 0;
}

.hr1{
margin:5px 0px;
border-top: 1px #ccc;
border-bottom: 1px #fff;
border-style:solid;
}

.hr2{
margin:5px 0px;
border-top: 1px #aaa;
border-style:dashed;
}

.hr3{
margin:5px 0px;
height:50px;
border-width:0px;
}

.memo{
background-color:#F4F0EC;
font-size:80%;
padding:0px 10px;
height:150px;
overflow:auto;
margin:5px 10px;
}

.img1{
box-shadow:1px 1px 3px -1px #888;
margin:1px;
}

.pagetop{
position: fixed;
bottom: 10px;
right: 14px;
}
 
.pagetop a{
display: block;
text-decoration: none;
}
 
.pagetop:hover{
opacity: 0.7 ;
}


/* リンクホバー時の設定 */
a {
position: relative;
}
a::after {
content: "";
position:absolute;
left:0;
bottom:1px;
border-bottom:1.5px solid #666;
width:0%;
transition:0.3s;
}
@media (hover: hover) {
a:hover::after {
width:100%;
  }
}

/* ホバー装飾の無効化 */
a:is(.snslist *)::after,
.btn::after,
.pageup::after {
display: none;
}

/*↓ディスプレイ900px以下用↓*/

@media screen and (max-width:900px) 

{
    
.base{
width:auto;
margin:0px 5px;
}

.box{
margin:0px;
    flex-direction:column;
}

.work{
width:auto;
margin:0px;
padding:10px;
}

.subwork{
width:auto;
margin:5px 0px;
padding:10px;
height:85vh;
}

.subwork2{
height:50%;
}

.text{
width:auto;
margin:0px;
padding:10px;
}

.menu{
margin:30px 0px;
font-size:90%;
}




h1{
    font-size:130%;
}




}