@charset "utf-8";
/*
Theme Name: hasse
Theme URI: https://hasse.jp/
Description: The original theme for hasse.jp.
Version: 1.0.1
Author: Hasegawa Design Office

2020/10/14 ver 0.0
2023/11/6 ver 0.9
2023/11/7 ver 0.9.1
2023/11/8 ver 0.9.5
2023/11/20 ver 1.0
2023/11/21 ver 1.0.1
2023/11/22 ver 1.0.2
*/

/*********************************************************************/
:root {
	--my-primary-color: #D2D2D3;/*　メインカラー */
	--my-sub-color: #c0dbf0;/*　サブカラー */
}
/*********************************************************************/
/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    clear: both;
}
/*********************************************************************/
/* Fonts */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('assets/fonts/LigatureSymbols-2.11.eot');
    src: url('assets/fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/LigatureSymbols-2.11.woff') format('woff'),
         url('assets/fonts/LigatureSymbols-2.11.ttf') format('truetype'),
         url('assets/fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('assets/fonts/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf_head::before, .lsf::before, .lsf-icon::before, .lsf-icon_after::after {
    content: attr(title);
    font-family: 'LigatureSymbols';
}

.lsf::before, .lsf-icon::before {
    margin-right: .25em;
}

.lsf::before, .lsf-icon_after::after {
    margin-left: .25em;
}

.lsf_head::before {
	font-size: 1.5rem;
	text-align: center;
}

/*********************************************************************/
/* Base CSS */
html, body {
    height: 100%;
	transition: 0.4s all;	
}
body, pre {
    font-family: 'EB Garamond', 'Noto Serif JP', “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo, serif;
	font-weight: 200;
}
body {
    margin: 0px;
    padding: 0px;
    font-size: 15px;
    line-height: 1.8em;
    word-wrap: break-word;
	text-align: justify;
	text-justify: inter-ideograph;
}
img {
    margin: 0px;
    padding: 0px;
    border-style: none;
	pointer-events: none;
}
/* -- a -- */
a {
    color: #666;
    text-decoration: none;
	transition: .3s;
}
.archives:hover,
a:hover {
    text-decoration: none;
    color: var(--my-sub-color)!important;
	transition: .3s;
}
a span {
	display: none;
}

blockquote {
	font-style: italic;
}

/* -- h -- */
H1, H2, H3 {
	font-feature-settings: "palt";
}

.wp-block-table {
	max-width: 43rem!important; 
	margin: 1rem auto!important;
}

.wp-block-table figcaption {
	text-align: left;
	font-size: .8rem;
	color: #333;
	margin-top: .5em;
}

table {
	width: 100%;
	border-collapse:  collapse;
	font-size: .8rem;
	font-weight: 300;
	font-family: Helvetica, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

th, td {
	border: 1px solid;
	padding: .5em;
}

th { text-align: center; }

/**********************************************************************
Loading背景画面設定
**********************************************************************/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
	color:#EEE;
}

/* Loading画像中央配置　*/
#splash_text {
	position: absolute;
	font-size: .5rem!important;
	font-family: "Courier New", Courier, "monospace";
	top: 50%;
	left: 50%;
    z-index: 999;
	transform: translate(-50%, -50%);
	color: #999;
	width: 100%;
}

/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
    height: 2px;
}

/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
    transition: all .5s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}

/**********************************************************************
 Layout 
***********************************************************************/
body#index {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#index #wrapper {
    width: 100%;
	align-items: flex-end;
    margin: auto;
}
#wrapper {
	padding-top: 1px;/*これがないと上に謎スペースが入る*/
}
/* header ***********************************************************************/
header {
	width: 100%;
	margin: 0 auto;
	z-index: 1000;
    padding-left: calc(env(safe-area-inset-left) + .25em);
}
header .wrapper {
    display: flex;
    justify-content: space-between;
	align-items: center;
}

#index header {
	z-index: 1000;
	margin-bottom: .5em;
}

/*マスクをするパスの設定*/
#svglogo {
	visibility: hidden;
}

#mask .st0{
    fill:none;
    stroke:#FFF;/*マスクする線の色*/
    stroke-width: 2;/*線の太さを指定する*/
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 0; /* 線の間隔を指定する */
    stroke-dashoffset:0; /* 線の位置を指定する */
}

header #logo {
    display: block;
	width: 144px;
	height: 48px;
	background-image: url('assets/img/logoB.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

header a#logo:hover {
	opacity: .5;
}

header #logo span{display: none;}

.archive header, 
.page header,
.single header{ margin: .5em 0;}

.archive header #logo,
.page header #logo {
	width: 96px;
	height: 32px;
}

header nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
	font-weight: bold;
	font-size: .75em;
	margin-bottom: 1rem;
    padding-right: calc(env(safe-area-inset-right) + .25em);
}

header nav UL {
    list-style: none;
    padding: 0;
    margin: 0;
}

header nav li {
	display: inline-block;
	margin-left: 1.5em;
}

header nav li a:hover {
	text-decoration: none;
}

header #menu {
	opacity: 0;
	transition: 1s;
}

.archive header, 
.page header,
.single header{ margin-top: .5em;}

.archive header #menu, 
.page header #menu,
.single header #menu{ opacity: 1; }

li .lsf-icon.logout:before  {
	content: '\E087';
    font-size: .9em;
}

/* index ***********************************************************************/

#cover-art {
    position: relative;
    width: 100%;
	will-change:height;
    height: 1px;/*25vh*/
    display: flex;
	justify-content: space-between;
	align-items: flex-end!important;
	margin-bottom: 1.5rem;
}

#cover-art.just-opened {
	height: .5px!important;
}

#cover-art a, nav#top-page UL.headline LI a {
    display: block;
    height: 100%;
    width: 100%;
}

#cover-art, nav#top-page UL.headline LI a {
    filter: grayscale(100%);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
    transition: .5s;
}

#cover-art .topimage {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-left: 1em;
	color: rgb(255,255,255,0);
}

nav#headline {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
nav#info {
    margin: 2em auto;
}
nav#info UL, nav#headline UL {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav#headline {
	height: 100%!important;
}
nav#headline UL li a {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	width: 100%;
	height: 100%!important;
	bottom: 0;
	padding-right: 1em;
	font-size: .8em;
	line-height: 1.5em;
    color: rgb(255,255,255,0);
	transition: .5s;
}
#cover-art .topimage time,
nav#headline UL li a time {
	display: block;
	font-size: .8em;
}

nav#info UL LI time {
    display: inline-block;
    vertical-align: 5%;
    font-size: .9em;
    width: 4.5em;
    margin-right: .5em;
}

nav#headline UL {
    display: flex;
    justify-content: space-between;
}


nav#headline UL LI {
    position: relative;
    display: block;
    width: 8vw;
    height: 100%!important;
    padding: 0;
    margin: 0;
    filter: grayscale(100%);
    background-color: #EEE;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-left: 1px solid;
    transition: .5s;
}

#cover-art .topimage:hover, #cover-art:hover,
nav#headline UL LI a:hover, nav#headline UL LI:hover {
    /*filter: grayscale(0%);*/
    transition: all .5s;
	color: rgb(255,255,255,1);
}


nav#headline UL LI:hover {
    width: 12vw;
}

/* footer ***********************************************************************/
body > footer {
  position: sticky;
  top: 100vh;
}

footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + .5em);
}

.page footer,
.single footer,
.archive footer{
	padding-top: .5em;
}

footer small{
    display: block;
	font-size: .8rem;
	line-height: 1.5em;
    text-align: center;
    margin-bottom: 1em;
}

footer small span {
	display: block;
	font-size: .8em;
}



/* single ***********************************************************************/
body.single main {
	position: relative;
}

body.single main::before {
	content:'';
	position: absolute;
	display: block;
	top: 30vh;
	width: 100%;
	height: 50vh;
}

article#single {
    margin: auto;
	position: relative;
}

article#single figure.top-image {
	position: relative;
    display: block;
    margin: auto;
    height: auto;
    width: 1200px;
}

article#single figure.top-image{
	animation-name: fadeInAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes fadeInAnime{
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

article#single figure.top-image img {
	width: 100%;
    object-fit: cover;
}

article#single figure {
	width: 100%;
	margin: 3em auto;
}

article#single figure.top-image.vertical{
	text-align: center;
	width: fit-content;
}

article#single figure.top-image.vertical img {
    height: 75vh;
	width: 50vh;
}
article#single figure.top-image.vertical.sp img {
    height: 68vh!important;
	width: 51vh!important;
}

article#single figure.top-image.horizontal.sp img {
    height: 90%!important;
}

.wp-block-image.vertical {
	width: 50%!important;	
	height: auto;
	margin: 2rem auto!important;
}
.wp-block-image.horizontal {
    width: 100%!important;
}

figcaption {
    text-align: right;
	font-family: Helvetica, Arial, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: .6rem;
    line-height: 1em;
}

figcaption P {
	text-indent: 0!important;
	font-size: .75rem;
	font-weight: 300;
	line-height: 1.2em;
	margin: 0 !important;
	width: 60%!important;
	float: left;
}

article#single #content H2,
article#single #content P{
	width: 38rem;
	margin: auto;
}

article#single #content H2 {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1rem!important;
	font-weight: 300;
	margin-top: 2.49rem;
	margin-bottom: .8rem;
	border-left: .1rem solid #999;
	padding-left: .9rem;
}

article#single #content P{
    text-indent: 1em;
    text-align: justify;
}


article#single .pillar {
	margin: 3rem 0 0 0;
    text-align: right;
	padding-right: .5em;
    font-size: .8em;
	border-right: 1px solid #999;
}

article#single .pillar,
article#single .pillar a {
	line-height: 1.5em;
}
article#single .pillar a:hover{
    color: var(--my-sub-color);
}

article#single .pillar time {
	display: block;
	font-size: .8rem;
	margin-bottom: .5em;
}

article#single #content {
    width: 80%;
    margin: 2em auto;
}


article#single #content figure img {
	max-width: 100%!important;
	height: auto;
}

article#single #content HR {
    border: none;
    border-bottom: 1px solid;
    margin: 0;
}

article#single #content H1 {
    font-size: 1em;
	text-align: center;
	margin-bottom: 1rem;
}

article#single UL#tag {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

article#single UL#tag LI {
    display: inline-block;
}

.wp-block-separator::before,
.read-more {
	display: block;
	text-align: center;
	font-size: .8em;
	margin: 1rem 0;
}

.wp-block-separator {
	border: none!important;
	margin: 1rem 0 2.8rem 0!important;
}

 .wp-block-separator::before{content: '＊';}

.wp-block-columns {
	display: flex;
	justify-content: space-between;
	width: 100%!important;
}
.wp-block-column {
	width: calc(50% - 1rem) !important;
	flex-grow: 0;
}


/* アーカイブ ***********************************************************************/
#archives {
	overflow: hidden;
}

#archives h1 {
	text-align: center;
	font-size: 1.2rem;
	margin-top: 2rem;
}

#archives h1 span {
	display: block;
}

#archives .message {
	text-align: center;
	margin: 0 auto 3rem auto;
	width: 50%;
}

#archives ul.board {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	line-height: 0%!important;
	padding: 8rem 0;
	font-size: .8em;
}

#archives ul.board li{
	list-style: none;
}
#archives ul.board li.top-1 { margin-top: -2rem; }
#archives ul.board li.top-2 { margin-top: -1rem; }
#archives ul.board li.top-3 { margin-top: 0; }
#archives ul.board li.top-4 { margin-top: 1rem; }
#archives ul.board li.top-5 { margin-top: 2rem; }
#archives ul.board li.left-1 { margin-left: .5rem; }
#archives ul.board li.left-2 { margin-left: 0rem; }
#archives ul.board li.left-3 { margin-left: -1rem; }
#archives ul.board li.left-4 { margin-left: -1.5rem; }
#archives ul.board li.left-5 { margin-left: -2rem; }
#archives ul.board li.right-1 { margin-right: .5rem; }
#archives ul.board li.right-2 { margin-right: 0rem; }
#archives ul.board li.right-3 { margin-right: -1rem; }
#archives ul.board li.right-4 { margin-right: -1.5rem; }
#archives ul.board li.right-5 { margin-right: -2rem; }


#archives ul.board li a {
	position: relative;
	display: inline-block;
	background-color: #FFF;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(100%);
	transition: .3s;
}
#archives ul.board li .photo{
	position: relative;
	transition: .3s;
}

#archives ul.board li .photo::before,
#archives ul.board li .photo.diagonal::after,
#archives ul.board li .photo.right-both::after,
#archives ul.board li .photo.both-side::after{
	content:"";
    position: absolute;
	width: 50%!important;
	height: 50%!important;
	z-index: -1;
}

#archives ul.board li .photo.none::before{
	widows: 0px!important;
	height: 0px!important;
}

#archives ul.board li .photo.diagonal::before,
#archives ul.board li .photo.both-side::before,
#archives ul.board li .photo.right-both::before,
#archives ul.board li .photo.right-bottom::before{
	bottom: 10px;
	right: 5px;
    transform:rotate(3deg)!important;
}

#archives ul.board li .photo.right-both::after{
	top: 10px;
	right: 5px;
    transform:rotate(-183deg)!important;
}
#archives ul.board li .photo.both-side::after{
	bottom: 10px;
	left: 5px;
    transform:rotate(-3deg)!important;
}
#archives ul.board li .photo.diagonal::after {
	top: 10px;
	left: 5px;
    transform:rotate(-177deg)!important;
}

#archives ul.board li .photo:hover {
	transform: rotate(0deg)!important;
	z-index: 1000!important;
}
#archives ul.board li .photo a:hover {
	filter: grayscale(0%);
}
#archives ul.board li .photo:hover::after,
#archives ul.board li .photo:hover::before {
	box-shadow: 0px 0px 0px 0 rgb(0,0,0,0)!important;
}

#archives ul.board li a div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	padding: .25em .5em;
	width: 100%;
	height: 100%;
	position: absolute;
	color: rgb(255,255,255,0);
	line-height: 1.5em;
	transition: .3s;
}
#archives ul.board li a div:hover{
	background: linear-gradient( rgb(255,255,255,0), rgb(0,0,0,.5) 90% );
	color: rgb(255,255,255,1);
	transition: .3s;
	background-blend-mode: overlay;
}

#archives ul.board .img-count {
	display: inline;
	margin-left: .5em;
}

#archives ul.board .img-count::before {
	content: '\E074';
	font-family: 'LigatureSymbols';
	margin-right: .25em;
}
#archives ul.board li aside {text-align: right;}
#archives ul.board li time {
	display: block;
	font-size: .8em;
}

#archives ul.board li a.vertical::after,
#archives ul.board li a.vertical {
	width: 200px;
	height: 300px;
}
#archives ul.board li a.horizontal::after,
#archives ul.board li a.horizontal {
	width: 300px;
	height: 200px;
}

#archives ul.board li a.vertical.sp::after,
#archives ul.board li a.vertical.sp {
	width: 180px;
	height: 240px;
}
#archives ul.board li a.horizontal.sp::after,
#archives ul.board li a.horizontal.sp {
	width: 240px;
	height: 180px;
}

#archives ul.board li a:hover {
	
	transform: .3s;
}

#archives ul#cat-list,
#archives ul#year-list,
#archives ul#tag-list {
	margin: 2rem auto;
}

#archives ul#cat-list::before {content: '\E028';}

#archives ul#cat-list li .current::before,
#archives ul#cat-list a::before {content: '\E002';}

#archives ul#cat-list .cat-child .current::before,
#archives ul#cat-list .cat-child a::before {content: '\E020';}

#archives ul#tag-list::before{content: '\E128';}

#archives.category-archive ul#cat-list a::before {content: '';}
#archives.category-archive ul.cat-child a::before {
	content: '—'!important;
	margin-right: .25em;
}

#archives ul#cat-list {
	font-size: 1rem;
	line-height: 1.8em;
	width: fit-content;
}

#archives ul#cat-list li .current,
#archives ul#cat-list li .current::before{
	font-size: 1rem;
	color: #000!important;
}

#archives ul#tag-list {
	font-size: .8rem;
	line-height: 1em;
	width: 50%;
	text-align: center;
}

#archives ul.cat-child a:hover::before,
#archives ul#cat-list.for-archive li a:hover::before,
#archives ul.cat-child li a:hover::before {
	color: var(--my-sub-color)!important;
}

#archives ul#cat-list.for-archive::before,
#archives ul#cat-list::before,
#archives ul#tag-list::before {
	display: block;
	margin-bottom: .5em;
}

#archives ul#tag-list::before {
	font-size: 1rem!important;
}

#archives ul#cat-list li {
	display: flex;
	justify-content: space-between;
}
#archives span.posts {
	font-size: .8em;
	margin-left: 2em;
}

#archives ul.cat-child {
	margin-left: 1em;
}

#archives ul#tag-list li {
	position: relative;
	display: inline-block;
	padding: .25em .5em;
	margin: .5em .5em;
	border-radius: .25em;
	box-shadow: none;
	transition: .3s;
}

#archives ul#tag-list li.link:hover {
	background-color: var(--my-sub-color);
	border-color: var(--my-sub-color);
	transition: .3s;
}
#archives ul#tag-list li a:hover {
	color: #333!important;
}


/* タグ ***********************************************************************/

.map-image {
	width: 300px;
	height: 300px;
	margin: auto;
	border: 1px solid rgb(135,135,135,.5);
}

.map-image.sweden{background-image: url("assets/img/map-sweden.svg");}
.map-image.finland{background-image: url("assets/img/map-finland.svg");}
.map-image.estonia{background-image: url("assets/img/map-estonia.svg");}
.map-image.stockholm{background-image: url("assets/img/map-stockholm.svg");}



/* WP ***********************************************************************/
.wp-block-image {
}

.wp-block-group {
	display: flex;
}

.wp-block-group P{
	width: 50%!important;
	padding: 0 1em!important;
}

nav#prevnext {
	line-height: 1em;
	margin: 1rem auto;
	height: 2em;
}
nav#prevnext:after {
	clear: both;
}
nav#prevnext a {
	position: relative;
	color: #666;
}
nav#prevnext a:hover{
	color: #666;
}

.prev-link {float: left;}

.next-link {float: right;}

.prev-link::before,
.next-link::after {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 .25em;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	transition: .3s;
}
.prev-link::before {content: '\E080';}
.next-link::after {content: '\E112';}

.prev-link:hover::before,
.next-link:hover::after {
	background-color: #999;
}

.prev-link:hover::after {
	content: 'Prev';
}
.next-link:hover::before {
	content: 'Next';
}
.prev-link:hover::before,
.prev-link:hover::after,
.next-link:hover::after,
.next-link:hover::before {
	transition: .3s;
	color: #666;
}
/* ページネーション ***********************************************************************/

nav.pagenation {
	text-align: center;
}
nav.pagenation ul {
	margin: 2rem auto;
}
nav.pagenation ul li {
	display: inline-block;
	margin: auto .5em;
}

nav.pagenation ul li.current {
	width: 1.5em;
	height: 1.5em;
	background: #000;
	border-radius: 50%;
}

/**********************************************************************
固定ページ
***********************************************************************/

article.page {
	width: 43rem;
	margin: 3rem auto;
}

article.page H1 {
	font-size: 2rem;
	line-height: 1.2em;
	text-align: center;
	margin-bottom: 3rem;
}

article.page H2 {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2em;
	border-left: 2px solid;
	margin: 2.69rem 0 1rem 0;
	padding-left: .5em;
}

article.page P {
	text-indent: 1em;
	text-align: justify;
}


article.page.error-404 {
	margin-top: 15vh;
}
article.page.error-404 P, article.page.error-404 div{
	text-align: center!important;
}

article.page.error-404 div {
	border: 1px solid #CCC;
	border-radius: .5em;
	padding: .25em;
	margin-top: 3rem;
	font-family: Arial, Helvetica, "sans-serif";
}

.page .about,
.page .about P {
	text-align: center;
}

.page .about P {
	margin: 1rem 0;
}

.page .about span {display: none;}

.page .about .me {
	display: block;
	width: 100px!important;
	height: 100px!important;
	margin: 5rem auto;
	background-image: url("assets/img/me.png");
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
}

/**********************************************************************
フォーム
***********************************************************************/

/* 印刷用 ***********************************************************************/
@media print {
	html, body {height: auto!important;}
	nav, img { display: none !important; }
	footer,	body.single main{ background-image: linear-gradient(0deg, #FFF, #FFF)!important;}
}