﻿@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: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{
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;
margin:10px 0px;
padding: 3px;
background-color:#F4F0EC;
border-radius:4px;
}



address{
font-size:75%;  
font-family: 'Halant','Klee One',YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN',  'serif';
}


/* ↓classタグ↓ */

a:link{
color:#7851A9;
text-decoration:none;
}

a:visited{
color:#7851A9;
text-decoration:none;
}




.item{
    background-color:#fff;
    text-align:center;
    margin:5px;
    padding:0px 5px;
    border-radius:4px;
}





.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;
}





.dt1{
    font-family: 'Cinzel', serif;
    margin:5px 0px 5px -10px;
}

.dt2{
    padding:0px;
}

.dt2:before{
    content:'▸';
    color:#7851A9;
    font-size:20px;
}

.dd1{
    border-style:solid;
    border-width:0px 0px 0px 2px;
    border-color:#F4F0EC;
    padding:4px;
    font-size:90%;
}

.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%;
}



.item a{
    display:block;
}

h1{
    font-size:130%;
}




















}
