@import url("html5reset-1.6.1.css");
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');
@font-face {
    font-family: 'LINE Seed JP';
    src: url('https://dolcemp.com/FONT/line_font/Web/WOFF2/LINESeedJP_OTF_Th.woff2') format('woff2');        
    font-weight: 100; /* Thin */
    font-style: normal;
}

@charset "UTF-8";

/* レイアウト */

*{
line-height:150%;
}

body{
color:#333;
background-color:#E5E4E2;
font-family: 'LINE Seed JP', sans-serif;
}


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

.header{
padding:10px;
text-align:center;
margin:0 auto;
background-color:#fff;
width:70%;
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(image/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;
}

.column{
display:flex;
flex-wrap:nowrap;
justify-content:center;
margin:15px 0px;
}

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

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

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

/*SWELL目次風*/
.box30{
margin: 2em auto;
padding:1em;/*内側余白*/
background:linear-gradient(-45deg,transparent 25%,#fafafa 25%,#fafafa 50%,transparent 50%,transparent 75%,#fafafa 75%,#fafafa);
background-size: 4px 4px;
border-bottom: 4px double #ddd;
border-top: 4px double #ddd;
background-clip: padding-box;
}

.text{


text-justify: inter-ideograph; /* 両端揃えの種類 */
 word-spacing: -1px;
font-size:100%;


margin:0 auto;
padding:10px;
line-height:180%;
max-width:1000px;
font-family: 'LINE Seed JP', sans-serif;


}




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


/* ↓タグ↓ */

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

h2{
font-size:70%;
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{
font-size:90%;
margin:10px 0px;
color:#8B8680;
}

h6 {
font-size: 87%;
font-weight: normal;
margin: 10px 0px;
padding: 3px 25px; /* 上下の余白は3px、左右の余白は25px */
background-color: #F4F0EC;
border-radius: 4px;
line-height:150%;
font-family: 'Klee One', 'Halant', 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
}


p{

text-align:left;
margin:10px 0px;
padding:5px;


}


/* リンクホバー時の設定 */
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%;
  }
}

address{
font-size:75%;  

}


/* セクションとアーティクル */
article {
margin: 3em auto;
text-align: justify;
word-break: break-all;
}

/* 文字色 */
nav p,
.atogaki {
color: #808080;
}

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

.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 ;
}

/*↓ディスプレイ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{
font-size:90%;
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
margin:0 auto;
padding:10px;
line-height:150%;
max-width:1000px;
font-family: 'Klee One','Halant',YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',  'serif';
}


.item a{
display:block;
}

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

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

h6 {
font-size: 86%;
font-weight: normal;
margin: 10px 0px;
padding: 3px 20px; /* 上下の余白は3px、左右の余白は20px */
background-color: #F4F0EC;
border-radius: 4px;
font-family: 'Klee One', 'Halant', 'YuMincho', 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
}



/* スマホ向けのフォントサイズ */

@media (max-width: 600px) {
 body {
    font-family: 'Halant', sans-serif; /* スマホではHalantを使用 */
 
  }

.text{
    text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
   font-feature-settings: "palt";
   width:auto;
   margin:0px;
   padding:10.77px;
   line-height:2.85;
font-family: 'Halant', sans-serif; /* スマホではHalantを使用 */
   

   font-size: 14px; /* スマホ用のフォントサイズ */
}

p {
    
 word-spacing: -1px;
  }


h6 {
font-size: 86%;
font-weight: normal;
margin: 10px 0px;
padding: 3px 20px; /* 上下の余白は3px、左右の余白は20px */
background-color: #F4F0EC;
border-radius: 4px;
 font-family: 'Klee One', sans-serif; /* デフォルトはKlee One */
font-kerning: auto; /* カーニングを自動に設定 */
}

h5{
font-family: 'Halant', sans-serif; /* スマホではHalantを使用 */
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph; /* 両端揃えの種類 */
font-feature-settings: "palt";
font-size:83%;
margin:10px 0px;
color:#8B8680;
}


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


@media (min-width: 768px) {
  body {
    font-size: 1.5vw; /* ビューポートの幅に応じたフォントサイズの調整 */
  }


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


  /* ... */
}



}