@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,500,600,700&display=swap');

/*----------------------------------------------
 reset
----------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font-weight: normal;
vertical-align:baseline;
background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}

ul,ol {
list-style:none;
}

a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}

* {
box-sizing: border-box;
}

@media all and (-ms-high-contrast:none){
body {
overflow-x: hidden;
}
}

/*----------------------------------------------
 body
----------------------------------------------*/
body{
-webkit-animation: fadeIn .8s ease-in-out 0s 1 normal;
animation: fadeIn .8s ease-in-out 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#fff;
z-index: 9999;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .8s ease;
transition: opacity .8s ease;
}
body.fadeout::after {
opacity: 1;
}
html {
font-size: 62.5%;
position: relative;
height: 100%;
}
html::before, html::after {
content:'';
border-top: solid 1px #ddd;
top: 22px;
width: 20px;
height: 20px;
position: absolute;
display: inline-block;
}
html::before {
border-right: solid 1px #ddd;
right: 22px;
z-index: 2;
}
html::after {
border-left: solid 1px #ddd;
left: 22px;
}
body {
color: #333;
background-color: #FFF3F8;
font-family: 'EB Garamond', 'ten-mincho', sans-serif;
font-size: 1.3rem;
line-height: 1.75;
position: relative;
height: 100%;
}
.container {
position: relative;
}
.home .container {
width: 100%;
height: 100%;
}
.container::before, .container::after  {
content:'';
border-bottom: solid 1px #ddd;
bottom: 22px;
width: 20px;
height: 20px;
position: absolute;
display: inline-block;
}
.container::before {
border-right: solid 1px #ddd;
right: 22px;
}
.container::after {
border-left: solid 1px #ddd;
left: 22px;
}
@media screen and (max-width: 760px){
html::before, html::after,
.container::before, .container::after {
display: none;
}
}
img {
max-width: 100%;
}
.inner {
max-width: 1288px;
margin: 0 auto;
padding: 0 44px;
}
@media screen and (max-width: 760px){
.inner {
padding: 0 20px;
}
}

/* header
----------------------------------------------*/
header {
background: #fff;
padding: 53px 0 90px;
}
.home header {
background: none;
position: absolute;
width: 100%;
}
header .logo {
position: absolute;
top: 50px;
}
header .logo img {
width: 179px;
height: 31px;
}
@media screen and (max-width: 760px){
header {
padding: 27px 0 60px;
}
header .logo {
position: relative;
display: inline-block;
top: 4px;
z-index: 200;
}
header .logo img {
width: 125px;
height: 21px;
}
}

/* nav
--------------------------------*/
header nav {
text-align: right;
}
header button.btn-nav {
display: none;
}
nav .list-nav li {
display: inline-block;
font-size: 1.4rem;
padding-right: 18px;
}
nav .list-nav li:last-child {
padding-right: 0;
padding-left: 15px;
position: relative;
}
nav .list-nav li:last-child::before {
background: #333;
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 8px;
width: 1px;
}
nav .list-nav li a {
color: #333;
text-decoration: none;
position: relative;
}
nav .list-nav li a::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
margin: auto;
justify-content: center;
height: 1px;
background-color: #333;
transition: width 300ms;
width: 0;
}
nav .list-nav li a:hover::after {
width: 100%;
}
nav .list-nav li.current a::after {
width: 100%;
}
header nav .list-sns {
display: none;
}
@media screen and (max-width: 760px){
.iPhone.hidden {
overflow: auto;
height: 100%;
}
body.hidden {
overflow: hidden;
height: 100%;
}
body.hidden .main,
body.hidden footer {
-ms-filter: blur(6px);
filter: blur(6px);
}
body.hidden::before {
content: "";
background: rgba(255,255,255,0.8);
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
}
header button.btn-nav {
border-top: 1px solid #222;
cursor: pointer;
display: inline-block;
height: 24px;
padding: 0;
position: absolute;
top: 27px;
right: 20px;
width: 34px;
z-index: 100;
}
header button.btn-nav::before,
header button.btn-nav::after {
background: #222;
display: block;
content: '';
position: absolute;
height: 1px;
width: 34px;
transition: 0.5s ease-in-out;
}
header button.btn-nav::before {
top: 50%;
transform: translateY(-50%);
}
header button.btn-nav::after {
bottom: 0;
}
header.active button.btn-nav {
border: none;
display: block;
height: 24.5px;
top: 27px;
right: 20px;
width: 24.5px;
}
header.active button.btn-nav::before,
header.active button.btn-nav::after {
background: #222;
height: 1px;
width: 28px;
top: 50%;
right: 0;
}
header.active button.btn-nav::before {
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
bottom: 0;
}
header.active button.btn-nav::after {
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 0;
}
header nav {
display: none;
}
header.active nav {
box-sizing: border-box;
z-index: 50;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
padding: 100px 20px 20px;
text-align: left;
}
header.active nav ul.list-nav {
box-sizing: border-box;
display: block;
margin: 0 auto 60px;
}
header.active nav ul.list-nav li {
display: block;
font-size: 2.4rem;
margin-bottom: 1.4rem;
padding: 0;
}
header.active nav ul.list-nav li a {
display: inline-block;
}
header.active nav .list-nav li:last-child {
padding-top: 1.4rem;
}
header.active nav .list-nav li:last-child::before {
width: 16px;
height: 1px;
top: 0;
transform: translate(0);
}
header.active nav .list-sns {
display: block;
}
}

/* main
----------------------------------------------*/
.main {
padding-top: 78px;
position: relative;
}
@media screen and (max-width: 760px){
.main {
padding-top: 50px;
}
}
.home .main {
padding-top: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hdg-l1 {
font-size: 6.4rem;
position: absolute;
top: 0;
transform: translateY(-60%);
}
@media screen and (max-width: 760px){
.hdg-l1 {
font-size: 4.4rem;
}
}
.hdg-l1-top {
text-align: center;
}
.hdg-l1-top svg {
width: 730px;
height: 125px;
max-width: 100%;
}
#svg-animetitle{
fill: none;
stroke: #fff;
stroke-width: 10;
stroke-miterlimit: 10;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
}
.hdg-l1-sub {
text-align: center;
font-size: 1.7rem;
font-style: italic;
}
@media screen and (max-width: 760px){
.hdg-l1-top svg {
width: 263px;
height: 45px;
}
.hdg-l1-sub {
text-align: center;
font-size: 1.4rem;
font-style: italic;
}
}
.list-pic {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 264px;
grid-gap: 5px;
}
.list-pic > li {
grid-template-columns: 1fr;
position: relative;
}
.list-pic > li img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.list-pic > li > a:hover {
cursor: zoom-in;
opacity: .8;
transition: 0.3s ease-in-out;
}
.list-pic > li:last-child {
margin-bottom: 0;
}
.lyt-item {
display: flex;
justify-content: space-between;
}
.lyt-item > * {
width: 30%;
}
.lyt-item .title {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.lyt-item .title p {
margin-bottom: 5px;
}
.lyt-item .image {
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.lyt-item .txt {
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.lyt-item .title .hdg-l2 {
font-size: 1.4rem;
margin-bottom: 8px;
}
.lyt-item .title .name-main {
font-size: 4.6rem;
line-height: 1.2;
margin-bottom: 8px;
}
.lyt-item .title .mail {
font-size: 1.3rem;
}
.lyt-item .list-history {
font-size: 1.2rem;
margin-top: 28px;
}
@media screen and (max-width: 760px){
.list-pic {
display: block;
}
.list-pic > li {
width: 100%;
text-align: center;
margin-bottom: 8px;
}
.lyt-item {
display: block;
}
.lyt-item > * {
width: 100%;
margin-bottom: 26px;
}
.lyt-item > *:last-child {
margin-bottom: 0;
}
.lyt-item .title p {
margin-bottom: 0;
}
.lyt-item .title .hdg-l2 {
margin-bottom: 0;
}
.lyt-item .title .name-main {
font-size: 3.2rem;
line-height: 1.5;
margin-bottom: 0;
}
.lyt-item .title .mail {
font-size: 1.2rem;
}
.lyt-item .list-history {
margin: 16px 0 24px;
}
}

/*----------------------------------------------
 footer
----------------------------------------------*/
footer {
padding: 40px 0;
}
.home footer {
position: absolute;
width: 100%;
bottom: 0;
}
footer::after {
content: "";
clear: both;
display: block;
}
footer .list-sns {
float: right;
}
.list-sns li {
display: inline-block;
padding-left: 30px;
}
.copyright {
font-size: 1rem;
float: left;
}
@media screen and (max-width: 760px){
footer {
padding: 28px 0 18px;
}
footer .list-sns {
float: none;
text-align: center;
}
.list-sns li:first-child {
padding-left: 0;
}
.copyright {
float: none;
text-align: center;
padding-top: 5px;
}
}

/*----------------------------------------------
 js
----------------------------------------------*/
/* slider
----------------------------------------------*/
.bg-slider {
background-position: center center;
background-size: cover;
}
@media screen and (max-width: 760px){
.bg-slider {
background-position: 60% center;
}
}