@charset "UTF-8";
/*
Theme Name: 株式会社マルシン
Theme URI: https://wazenmiyabi.info/
Description: 株式会社マルシン宅配ボックス
Version: 1.22
Author: Takahiro Shimokawa
Author URI: https://wazenmiyabi.info/
*/
/*------------------------------------*/
*{margin:0;padding:0;}
html{font-size:62.5%;-webkit-font-smoothing:antialiased;}
body{
    font-size:clamp(14px,1.14vw,24px);
    line-height:150%;
    -webkit-font-smoothing:antialiased;

    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    width:100%;
    overflow-x:hidden;
}
@media screen and (max-width:1000px){body{overscroll-behavior:none;}}
header,footer,main,article,section,nav,aside,small,div,uk,li,a{
    display:block;
    box-sizing:border-box;
    position:relative;
}
h1,h2,h3,h4,p,small{
    font-size:100%;
    font-weight:normal;
    line-height: 150%;
    position:relative;
}
li{list-style: none;}
img{
    display:block;
    outline:none;
    width:100%;
    height:100%;
    object-fit:contain;
}
iframe{
    border:none;
    width:100%;
    height:100%;
}
a{text-decoration:none;}
.up{
    opacity:0;
    transform:translate(0,5vh);
    transition-duration:0.4s;
}
.inview{
    opacity: 1;
    transform:translate(0,0);
}
/*------------------------------------*/
/*------------------------------------*/
/*▼▼▼*/
/*全体*/
#mainheader{height:4em;border-bottom:5px solid green;}
#frontpage{height:calc(100vh - 7em);}
footer{height:3em;}
/*header*/
#mainheader .marushinlogo{
    margin-left: auto;
}
#mainheader .headtel span:nth-of-type(1){
    font-size:2em;
    line-height: 1em;
    font-weight:bold;
    border-bottom:1px solid black;
    display: inline-block;
}
#mainheader .headtel span:nth-of-type(2){
    font-size:.9em;
}
#mainheader .headcontact{
    margin-left: .5em;
    transition-duration:0.4s;
}
#mainheader .headcontact:hover{
    transform:rotate(10deg);
}
#mainheader img{
    width:auto;
    height: calc(4em - 5px);
}
.morebtn{
    font-size: .8em;
    height: 1.5em;
    background: white;
    border-radius: 1em;
    width: 3em;
    margin: 0 auto;
    border: .1em solid #ccc;
    transition-duration: 0.8s;
    display: block;
    position: relative;
}
#frontpage #about li a:hover .morebtn{
    background:#17d417;
    border-color:white;
}
#frontpage #about li a:hover .morebtn span{
    left:calc(100% - 1.2em);
    background:#fafafa;
}
.fukidashi{
    font-size:3em;
    font-weight: bold;
    margin-bottom:.5em;
    padding:0 2em;
    display: inline-block;
}
.fukidashi span{
    font-size:.7em;
}
.morebtn span{
    width:1.1em;
    height:1.1em;
    border-radius:1em;
    background:#aaa;
    position:absolute;
    left:.1em;
    top:50%;
    transform:translate(0, -50%);
    transition-duration:0.8s;
}
.fukidashi::before,
.fukidashi::after{
    content:'';
    position: absolute;
    bottom:0;
    height:100%;
    width:.1em;
    background:black;
}
.fukidashi::before{
    left:0;
    transform:rotate(-20deg);
}
.fukidashi::after{
    right:0;
    transform:rotate(20deg);
}
.plice{
    color:red;
    font-weight:bold;
}
.plice span:nth-of-type(1){
    color:black;
    font-weight: 400;
}
.plice span:nth-of-type(2){
    font-size:5em;
    font-family: "Geist", sans-serif;
    line-height: 1.5em;
}
.kome{
    font-size: .7em;
    vertical-align: super;
    font-weight: bold;
}
.tag{
    color:#2da9f8;
    font-weight: bold;
}
.backcolor>div::before{
    content:'';
    position: absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index: -1;
    transition-duration:0.8s;
}
.backcolor1>div::before{background:#9ae0b7;}
.backcolor2>div::before{background:#f8eeaf;}
.backcolor3>div::before{background:#b2deff;}
.backcolor4>div::before{background:#f6a7ff;}
.backcolor5>div::before{background:#ffd795;}
.backcolor6>div::before{background:#a1d9cd;}
.backcolor1 .backcoloron::before{transform:rotate(10deg);}
.backcolor2 .backcoloron::before{transform:rotate(-20deg);}
.backcolor3 .backcoloron::before{transform:rotate(30deg);}
.backcolor4 .backcoloron::before{transform:rotate(-10deg);}
.backcolor5 .backcoloron::before{transform:rotate(15deg);}
.backcolor6 .backcoloron::before{transform:rotate(-30deg);}
/*------------------------------------*/
/*page共通*/
#page{
    padding-bottom:7em;
}
#pageheader{
    border-bottom:1px solid green;
}
#pageheader h1{
    font-size: 2.5em;
    text-align: center;
    line-height: 3em;
}
#pageheader h1 span{
    font-size:.7em;
    color:#008eff;
    margin-right:.5em;
}
/*------------------------------------*/
/*front*/
#frontpage>header{
    width:40%;
    border-right:5px solid white;
}
#topimage{
    height:calc(80vh - 7em);
}
#catch{
    height: 20%;
    padding: 1em;
    background: #9acca5;
}
#catch h2{
    height:100%;
}
#topface{
    height:60%;
    background:#f6f6f6;
}
#topdisc{
    height:20%;
}
#otameshibtn{
    position:absolute;
    bottom:1em;
    left:50%;
    transform:rotate(0deg) translate(-50%,0);
    background:linear-gradient(lime,#259825);
    line-height:1em;
    padding:.6em 2.5em;
    border:.2em solid white;
    color:yellow;
    border-radius:2em;
    white-space:nowrap;
    animation:otameshibtn 1.4s infinite ease-in-out;
    opacity:.9;
}
#otameshibtn:hover{
    opacity:1;
}
@-webkit-keyframes otameshibtn{
    0%{transform:translate(-50%,0)rotate(0deg);}
    5%{transform:translate(-50%,-.05em) rotate(-.4deg);}
    10%{transform:translate(-50%,-.1em)rotate(-.8deg);}
    15%{transform:translate(-50%,-.15em)rotate(-1.2deg);}
    20%{transform:translate(-50%,-.2em)rotate(-1.6deg);}
    25%{transform:translate(-50%,-.25em)rotate(-2deg);}
    30%{transform:translate(-50%,-.3em)rotate(-1.6deg);}
    35%{transform:translate(-50%,-.35em)rotate(-1.2deg);}
    40%{transform:translate(-50%,-.40em)rotate(-.8deg);}
    45%{transform:translate(-50%,-.45em)rotate(-.4deg);}
    50%{transform:translate(-50%,-.5em)rotate(0deg);}
    55%{transform:translate(-50%,-.45em)rotate(.4deg);}
    60%{transform:translate(-50%,-.40em)rotate(.8deg);}
    65%{transform:translate(-50%,-.35em)rotate(1.2deg);}
    70%{transform:translate(-50%,-.3em)rotate(1.6deg);}
    75%{transform:translate(-50%,-.25em)rotate(2deg);}
    80%{transform:translate(-50%,-.2em)rotate(1.6deg);}
    85%{transform:translate(-50%,-.15em)rotate(1.2deg);}
    90%{transform:translate(-50%,-.10em)rotate(.8deg);}
    100%{transform:translate(-50%,-.05em)rotate(.4deg);}
}
@keyframes otameshibtn{
    0%{transform:translate(-50%,0)rotate(0deg);}
    5%{transform:translate(-50%,-.05em) rotate(-.4deg);}
    10%{transform:translate(-50%,-.1em)rotate(-.8deg);}
    15%{transform:translate(-50%,-.15em)rotate(-1.2deg);}
    20%{transform:translate(-50%,-.2em)rotate(-1.6deg);}
    25%{transform:translate(-50%,-.25em)rotate(-2deg);}
    30%{transform:translate(-50%,-.3em)rotate(-1.6deg);}
    35%{transform:translate(-50%,-.35em)rotate(-1.2deg);}
    40%{transform:translate(-50%,-.40em)rotate(-.8deg);}
    45%{transform:translate(-50%,-.45em)rotate(-.4deg);}
    50%{transform:translate(-50%,-.5em)rotate(0deg);}
    55%{transform:translate(-50%,-.45em)rotate(.4deg);}
    60%{transform:translate(-50%,-.40em)rotate(.8deg);}
    65%{transform:translate(-50%,-.35em)rotate(1.2deg);}
    70%{transform:translate(-50%,-.3em)rotate(1.6deg);}
    75%{transform:translate(-50%,-.25em)rotate(2deg);}
    80%{transform:translate(-50%,-.2em)rotate(1.6deg);}
    85%{transform:translate(-50%,-.15em)rotate(1.2deg);}
    90%{transform:translate(-50%,-.10em)rotate(.8deg);}
    100%{transform:translate(-50%,-.05em)rotate(.4deg);}
}
#catch h2>span{
    display: block;
}
#catch h2 span span{
    color:red;
    font-weight: bold;
}
#catch h2>span:nth-of-type(2){
    font-size: 3em;
    font-weight: bold;
    line-height: 1.1em;
    text-align: center;
}
#catch h2>span:nth-of-type(2)>span{
    font-size: 1.5em;
}
#catch h2>span:nth-of-type(3){
    font-size: .7em;
}
#frontmovie{
    height:20vh;
    padding:1em;
    background:#f4f4f4;
}
#frontmovie div{
    margin:0 auto;
    width:49%;
    height:100%;
}
#frontmovie iframe{
    aspect-ratio:16 / 9;
}
#frontpage #kodatebanner{
    position: absolute;
    right:1em;
    bottom:1em;
    width:5em;
    transition-duration:0.4s;
}
#frontpage #kodatebanner:hover{
    opacity: .6;
}
/*----------------------------*/
#frontpage>article{
    width:60%;
}
#frontpage #pr{
    height:calc(45vh - 7em);
    background:#fcffed;
    padding:2vh;
    border-bottom:5px solid white;
}
#frontpage #pr h2{
    font-size: 2em;
    position: relative;
    padding: .2em 1.3em 0 0;
    font-weight: bold;
    color: #7e1414;
    line-height: 1em;
    padding-top: .2em;
}
#frontpage #pr h2::before,
#frontpage #pr h2::after{
    content:'';
    height:100%;
    width:3px;
    background:#555;
    border-radius: 3px;
    bottom:0;
    position: absolute;
}
#frontpage #pr h2::before{
    left:3em;
    transform:rotate(-25deg);
}
#frontpage #pr h2::after{
    right:3em;
    transform:rotate(25deg);
}
#frontpage #pr h2 span{
    font-size:1.2em;
    font-weight:bold;
    color: #ff2df1;
    position: relative;
    text-shadow: .05em .05em 0 #fff400;
}
#frontpage #pr h2 span::after{
    content: '';
    width: 1em;
    height: 1em;
    background: url(images/naisho.webp) center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -.05em;
    right: -1.1em;
    transform: rotate(25deg);
}
#frontpage #pr>small{
    font-size: .7em;
    line-height: 2em;
    margin-bottom: .5em;
    color:#888;
}
#frontpage #pr ul{
    height:71%;
    background:white;
}
#frontpage #pr li{
    height:100%;
    overflow:hidden;
    padding:1em;
}
#frontpage #pr li h3{
    font-weight: bold;
    margin-bottom:1.2em;
    background: #dffabf;
    line-height: 2em;
    border-radius: 1em;
    position: relative;
}
#frontpage #pr li h3::before{
    content: '';
    border: .7em solid transparent;
    border-top: 1em solid #dffabf;
    position: absolute;
    bottom: -1.5em;
    left: calc(50% - 1em);
}
#frontpage #pr li h3 span{
    font-size:.7em;
}
#frontpage #pr li p{
    font-size:.7em;
}
#frontpage #pr li p span{
    font-size:.7em;
    color:#777;
    vertical-align: text-bottom;
}
#frontpage #pr li p span:last-of-type{
    vertical-align: middle;
}
#frontpage #pr li div:nth-of-type(1){
    filter: blur(4px);
    transition-duration:0.4s;
}
#frontpage #pr li:hover div:nth-of-type(1){
    filter:none;
}
#frontpage #pr li div:nth-of-type(2){
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    cursor:pointer;
    opacity: .8;
}
#frontpage #pr .maku1{
    background:#d4daf7;
}
#frontpage #pr .maku2{
    background:#f0ccb1;
}
#frontpage #pr .maku3{
    background:#aae86a;
}
#frontpage #plan li:nth-of-type(1){
    background:url(images/plan1back.webp) center no-repeat;
    background-size:cover;
}
#frontpage #plan li:nth-of-type(2){
    background:url(images/plan2back.webp) center no-repeat;
    background-size:cover;
}
#frontpage #plan a{
    height:20vh;
}
#frontpage #items{
    background:#e3e3f1;
}
#frontpage #items ul{
    padding:1vh 1vh 0;
}
#frontpage #about h2{
    color:black;
}
#frontpage .aboutimg{
    height:7.5vh;
}
#frontpage #about li:nth-of-type(1){background:#ffdce0;}
#frontpage #about li:nth-of-type(2){background:#ebf4ff;}
#frontpage #about li:nth-of-type(3){background:#fffde1;}
#frontpage #about li:nth-of-type(4){background:#f1ebd7;}
#frontpage #about a{
    height:15vh;
    overflow: hidden;
}
#frontpage #about li img,
#frontpage #plan li img{
    transition-duration:0.8s;
}
#frontpage #about li:hover img,
#frontpage #plan li:hover img{
    transform:rotate(5deg) scale(.95);
}
#frontpage #items li a{
    height:15vh;
    background:linear-gradient(145deg,white 25%,#cde3ea);
    overflow: hidden;
}
#frontpage #items li a::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background:#cde3ea;
    transition-duration: .4s;
    opacity: 0;
}
#frontpage #items li:hover a::before{
    opacity: 1;
}
#frontpage #items li a>div{
    height:75%;
}
#frontpage #items li a div div{
    height:100%;
}
#frontpage #items li a p{
    font-size: .7em;
    color: black;
}
#frontpage #items li:hover img{
    transition-duration:0.8s;
}
#frontpage #items>a{
    height: 4vh;
    letter-spacing: .2em;
    line-height: 3.5vh;
    font-weight: bold;
    color: #5a8db3;
    transition-duration:0.4s;
}
#frontpage #items>a:hover{
    letter-spacing: .3em;
    text-decoration: underline;
    background: #bdd8e6;
}
/*---------------------------------*/
/*plan*/
#hanbaiplan,
#rentalplan{
    width:50%;
    padding:3em;
}
#plan1>section>div{
    border:5px solid #85ce9f;
    padding:2em;
    border-radius: 4em;
}
#plan1 h2{
    font-size: 2em;
    font-weight: bold;
    position: relative;
    line-height:2em;
    color: #296493;
}
#plan1 h2::before{
    content:'';
    width:100%;
    position: absolute;
    bottom:0;
    left:0;
    height:.2em;
    background:#ff9dce;
    border-radius: 1em;
}
#plan1>p{
    position: absolute;
    left:50%;
    bottom:0;
    width:20em;
    transform:translate(-50%,0);
    animation:yokoyure 3s infinite;
}
@-webkit-keyframes yokoyure{
    0%{left:50%;}
    25%{left:51%;}
    50%{left:50%;}
    75%{left:49%;}
    100%{left:50%;}
}
@keyframes yokoyure{
    0%{left:50%;}
    25%{left:51%;}
    50%{left:50%;}
    75%{left:49%;}
    100%{left:50%;}
}
#plan1 h3{
    background: skyblue;
    color: white;
    font-size: 1.5em;
    line-height: 1.5em;
    margin-bottom: 1em;
    padding-top: .2em;
}
#plan1 li{
    text-align: left;
    margin-left:-1.5em;
}
#plan1 li::before{
    content:'● ';
}
#plan3>div:nth-of-type(1){
    font-size: 5em;
    color: #6abc22;
    line-height: .5em;
    padding-top: .15em;
    font-weight: bold;
    background: #7a8bd5;
    text-shadow: .02em .02em 0 white, -.02em -.02em 0 white, -.02em .02em 0 white, .02em -.02em 0 white;
    margin: .5em 3%;
}
#plan3 a{
    display: inline-block;
    font-size: 2em;
    line-height: 1em;
    padding: .3em 1em .3em 1.2em;
    border: .1em solid #409eab;
    border-radius: 1em;
    margin: .5em 1em;
    color: #409eab;
    box-shadow: .1em .1em .2em #ddd;
    transition-duration:0.4s;
}
#plan3 a:hover{
    background:#409eab;
    color:white;
    transform:translate(.5em,0);
}
/*---------------------------------*/
/*hoshu*/
#hoshu1{
    padding:3em 0;
}
#hoshu1 ul{
    border-bottom: 3px solid #ff9dce;
    padding: 1em 0;
    margin-bottom: 1em;
}
#hoshu1 li{
    width: 18.5%;
    font-size: 1.2em;
    line-height: 2em
}
#hoshu1 li div{
    aspect-ratio:3/4;
}
#hoshu1 li div img{
    object-fit: cover;
}
#hoshu1 li span{
    background: #9fccd9;
    display: block;
    margin: .5em 0;
    border-radius: 1.2em;
    padding-top: .2em;
    color: white;
    font-weight: bold;
}
#hoshu1 .plice span{
    line-height: .9em;
}
#hoshu2>div>div:nth-of-type(1){
    margin-bottom:2em;
}
#hoshu2 h2{
    font-size:1.5em;
    font-weight: bold;
    border-bottom:1px solid #ccc;
}
#hoshu2 small{
    font-size:.8em;
}
/*---------------------------------*/
/*review*/
#review ul{
    padding-top:5em;
}
#review li{
    width:28%;
    margin-bottom:3em;
}
#review li:nth-of-type(n+4){
    margin-bottom:0;
}
#review h2{
    font-size: 1.5em;
    font-weight: bold;
    color: #559b00;
    line-height: 1.2em;
    margin: 1em auto;
}
#review h2::before{
    content: '';
    height: 3px;
    width: 100%;
    position: absolute;
    bottom: -.5em;
    left: 0;
    background: #aec2d7;
    border-radius: 3px;
}
#review h2+p{
    margin-bottom:1em;
    font-size:.8em;
}
#review li div p{
    color:#777;
}
/*---------------------------------*/
/*flow*/
#flow1 h2{
    margin:1em auto .5em;
}
#flow1 ul{
    padding:3em 2.5em;
    position: relative;
    height: 21em;
}
#flow1>div>div:nth-of-type(1) ul{
    background: #f8f6ef;
}
#flow1>div>div:nth-of-type(1) p{
    border-top: .6em double red;
    color:red;
    font-size:1.5em;
    font-weight: bold;
}
#flow1>div>div:nth-of-type(1) small{
    font-size:.7em;
}
#flow1 li{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: 4em;
    padding: 1em .5em;
    border: 3px solid #4b94b6;
    box-shadow: .1em .1em .4em #ddd inset, .1em .1em .5em #aaa;
    border-radius: 1em;
    background:white;
    font-size: 1.2em;
}
#flow1 ul li:last-of-type{
    margin-right:0;
}
#flow1 li::before{
    content: '➡';
    position: absolute;
    top: 43%;
    right: -1.3em;
    width: 1em;
    font-size: 3em;
    transform: rotate(-90deg);
    color: #67a166;
}
#flow1>div>div:nth-of-type(2) li:last-of-type::before{
    content:none;
}
#flow1>div>div:nth-of-type(2) li:nth-of-type(3)::before{
    opacity:.95;
}
#flow1>div>div:nth-of-type(2) li:nth-of-type(2)::before{
    opacity:.9;
}
#flow1>div>div:nth-of-type(2) li:nth-of-type(1)::before{
    opacity:.85;
}
#flow1>div>div:nth-of-type(1) li:nth-of-type(6)::before{
    opacity:.8;
}
#flow1>div>div:nth-of-type(1) li:nth-of-type(5)::before{
    opacity:.75;
}
#flow1>div>div:nth-of-type(1) li:nth-of-type(4)::before{
    opacity:.7;
}
#flow1>div>div:nth-of-type(1) li:nth-of-type(3)::before{
    opacity:.65;
}
#flow1>div>div:nth-of-type(1) li:nth-of-type(2)::before{
    opacity:.6;
}
#flow1>div>div:nth-of-type(1) li:nth-of-type(1)::before{
    opacity:.55;
}
#flow2{
    margin-top:5em;
}
#flow2 h2{
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    margin-bottom:.5em;
}
#flow2 li{
    margin-bottom: .2em;
    color: #023610;
}
#flow2>div:nth-of-type(2){
    margin-left:3em;
}
#flow2>div:nth-of-type(2)>div{
    aspect-ratio:3/4;
    width:20em;
}
#flow2 img{
    object-fit: cover;
}
#flow2 small{
    font-size:.7em;
    margin-top:1em;
}
/*---------------------------------*/
/*faq*/
#faq{
    padding-top:3em;
}
#faq h2{
    margin-bottom:0;
    font-size:2.5em;
    display:block;
    text-align:center;
}
#faq h2 .fukidashiimg{
    display: inline-block;
    width: 10em;
    margin-bottom: -0.5em;
    margin-right: .5em;
}
#faq h2+p{
    color:#777;
    margin-bottom: 2em;
}
#faq>div>div{
    margin-bottom:6em;
}
#faq section{
    margin-bottom:3em;
}
#faq h3{
    font-size:1.5em;
    font-weight: bold;
    margin-bottom:.5em;
}
#faq h3 span:nth-of-type(1){color:#308bcd;}
#faq h3 span:nth-of-type(2){color:#8d6dd1;}
#faq h3 span:nth-of-type(3){color:#e059a2;}
#faq section>div{
    padding:2em;
    background:#fafafa;
}
#faq .backcolor3 .backcoloron::before{
    transform:rotate(10deg);
}
#faq details{
    transition-duration:0.4s;
}
#faq summary{
    padding:.5em 0;
    cursor: pointer;
    border-bottom: 1px solid;
    position: relative;
}
#faq details:nth-of-type(8n+1) summary{
    border-color:#59a3c5;
}
#faq details:nth-of-type(8n+2) summary{
    border-color:#8d6dd1;
}
#faq details:nth-of-type(8n+3) summary{
    border-color:#e059a2;
}
#faq details:nth-of-type(8n+4) summary{
    border-color:#ffae1b;
}
#faq details:nth-of-type(8n+5) summary{
    border-color:#7c9dff;
}
#faq details:nth-of-type(8n+6) summary{
    border-color:#5bc23b;
}
#faq details:nth-of-type(8n+7) summary{
    border-color:#308bcd;
}
#faq details:nth-of-type(8n+8) summary{
    border-color:#07c1a0;
}
#faq summary::marker{
    content: none;
}
#faq summary:hover{
    opacity: .7;
}
#faq summary::before{
    content:'Q. ';
    font-size:1.2em;
    font-weight: bold;
}
#faq summary .morebtn{
    position: absolute;
    right:.5em;
    top: 50%;
    transform: translate(0, -50%);
}
#faq .summaryon{
    font-weight: bold;
    color:green;
    border-bottom:none;
    padding-top:1.5em;
}
#faq details:nth-of-type(1) .summaryon{
    padding-top:.5em;
}
#faq .summaryon .morebtn{
    background: #17d417;
    border-color: white;
}
#faq .summaryon .morebtn span{
    left: calc(100% - 1.2em);
    background: #fafafa;
}
#faq details p{
    background: white;
    padding: 1em;
    margin-bottom:1em;
    border: 1px solid #ccc;
    border-radius: 1em;
}
#faq details p::before{
    content:'A. ';
    font-size:1.5em;
    font-weight: bold;
    color:#b20000;
}
#faq a{
    display: inline;
    color:#006bff;
    text-decoration: underline;
}
/*---------------------------------*/
/*items archive*/
#archive #items{
    padding:3em;
}
#archive #items section{
    margin-bottom:7em;
}
#archive #items h3{
    font-size:2em;
    font-weight: bold;
    border-bottom:1px solid #aaa;
    margin-bottom:2em;
}
#archive #items li{
    width: 90%;
    margin: 0 auto;
}
#archive #items li:last-of-type{
    margin-right:auto;
}
#archive #items li>div a{
    height: 20em;
    background: #fafafa;
    padding: 2em;
    overflow: hidden;
}
#archive #items li>div a img{
    transition-duration:0.4s;
}
#archive #items li>div a:hover img{
    transform:scale(1.1);
}
#archive #items li .name{
    font-size: 1.5em;
    color: black;
    line-height: 1.5em;
    margin-top: .5em;
}
#archive #items li .name:hover{
    color:#07c1a0;
}
/*---------------------------------*/
/*items single*/
#single #items section{
    padding:3em 0 5em;
}
#single #items section>div:nth-of-type(1){
    padding-right:2em;
}
#single #items section>div:nth-of-type(2){
    padding: 3em;
    background: #e8f0f5;
    margin-left: auto;
    width: 20em;
}
#single #items h2{
    font-size: 6em;
    font-weight: 500;
    border-bottom: 1px solid #aaa;
    margin-bottom: .25em;
    font-family: "Geist", sans-serif;
}
#itemabout .size{
    margin-bottom:1em;
}
#itemabout .comment{
    margin-top: 2em;
    border: 1px solid #aaa;
    border-radius: 1em;
    padding: 2em;
}
#itemabout .comment span{
    position: absolute;
    width: 4em;
    right: 0;
    top: -3em;
    transform: rotate(31deg);
}
#archive #items .zumen a,
#itemabout .zumen a{
    background: #819aaf;
    color: white;
    border: .2em solid white;
    box-shadow: .1em .1em .5em #aaa;
    margin: 2em auto;
    display: inline-block;
    padding: .5em 2em;
    border-radius: 2em;
    transition-duration:0.4s;
}
#itemabout .ichiran a{
    background: #cfb7ff;
    text-align: center;
    color: white;
    padding: .2em 0;
    margin-top: 1em;
    transition-duration:0.4s;
}
#itemabout .ichiran a:hover{
    letter-spacing: .1em;
}
#archive #items .zumen a:hover,
#itemabout .zumen a:hover{
    box-shadow: 0 0 .2em #aaa;
    background:#5b8291;
}
#single #items aside{
    padding-bottom:9em;
}
#single #items aside li{
    padding:1em;
}
#single #items aside li:last-of-type{
    margin-right:auto;
}
/*---------------------------------*/
/*footer*/
#sharefooter{
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
}
footer li{
    width:calc(100% / 7);
    background:#006597;
    height:3em;
}
footer li a{
    line-height:3em;
    background:#0f6a06;
    transition-duration:0.4s;
    color:white;
    overflow: hidden;
}
footer li:hover a{
    background:#006597;
    transform:translate(0,-2em);
    padding-bottom:2em;
    border-radius: 1em 1em 0 0;
}
footer li:nth-of-type(1) a{background:#59a3c5;}
footer li:nth-of-type(2) a{background:#8d6dd1;}
footer li:nth-of-type(3) a{background:#e059a2;}
footer li:nth-of-type(4) a{background:#ffae1a;}
footer li:nth-of-type(5) a{background:#7c9dff;}
footer li:nth-of-type(6) a{background:#5cc23b;}
footer li:nth-of-type(7) a{background:#308bcd;}
footer li:nth-of-type(8) a{background:#05c1a0;}
footer li a span{
    display: block;
    position: relative;
}
footer li a span::before{
    content:'';
    height:1px;
    width:0;
    background:white;
    position: absolute;
    bottom:.5em;
    left:50%;
}
footer li:hover a span::before{
    transition-duration:1s;
    width:90%;
    left:5%;
}
footer li a span::after{
    content:'';
    position:absolute;
    bottom:-1.2em;
    left:50%;
    transform:translate(-50%, 0);
    border:.5em solid transparent;
    border-top:.75em solid white;
    opacity: 0;
}
footer li:hover a span::after{
    transition-duration:1.2s;
    transform:translate(-50%,0);
    opacity: 1;
}
/*▲▲▲*/
/*------------------------------------*/
/*------------------------------------*/
@media screen and (min-width:700px){
    .ddn{display:none;}
    .txl{text-align:left !important;}
    .txc{text-align:center !important;}
    .txr{text-align:right !important;}
    #wrap,#navi{min-width:1240px;}
    .minwidth{width:80%;margin:0 auto;min-width:1240px;}
    .flexcenter{
        display:-webkit-box;display:flex;
        align-items:center;
        -webkit-justify-content:center;justify-content:center;
    }
    .glid1{display:grid;grid-template-columns:repeat(1,1fr);gap:0;}
    .glid2{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
    .glid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
    .glid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
    .glid7{display:grid;grid-template-columns:repeat(7,1fr);gap:0;}
    .glid8{display:grid;grid-template-columns:repeat(8,1fr);gap:0;}
    .flex{display:-webkit-box;display:flex;}
    .flexwrap{-webkit-flex-wrap:wrap;flex-wrap:wrap;}
    .itemstart{align-items: flex-start;}
    .itemcenter{align-items: center;}
    .itemend{align-items: flex-end;}
    .justifyspace{
        -webkit-justify-content:space-between;
        justify-content:space-between;
    }
    .justifyaround{
        -webkit-justify-content:space-around;
        justify-content:space-around;
    }
    .justifycenter{
        -webkit-justify-content:center;
        justify-content:center;
    }
}
@media screen and (max-width:699px){
    body{font-size:14px;}
    .mdn{display:none !important;}
    .m_flexcenter{
        display:-webkit-box;display:flex;
        align-items:center;
        -webkit-justify-content:center;justify-content:center;
    }
    .m_flex{display:-webkit-box;display:flex;}
    .m_flexwrap{-webkit-flex-wrap:wrap;flex-wrap:wrap;}
    .m_itemstart{align-items: flex-start;}
    .m_itemcenter{align-items: center;}
    .m_itemend{align-items: flex-end;}
    .m_justifyspace{
        -webkit-justify-content:space-between;
        justify-content:space-between;
    }
    .m_justifyaround{
        -webkit-justify-content:space-around;
        justify-content:space-around;
    }
    .m_justifycenter{
        -webkit-justify-content:center;
        justify-content:center;
    }
}