/* Box Sizing */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

:root {

    --color-light-green : #dbecdb;
    --color-mdl-light-gray : #CCCCCC;
    --color-light-gray : #D5D5D5;

    --font-family-gothic-noto : "Noto Sans JP", "Noto Sans Japanese", sans-serif;

}

/* 各タグの基本スタイル */
html {
    font-size: 16px;
}

body {
    padding:0;
    margin:0;
    font-family: var(--font-family-gothic-noto);
    font-size: 1rem;
}

ul {
    list-style: none;
    padding : 0;
}

/* lity */
a[data-lity] {
    display:table;
    position:relative;
}
a[data-lity]::after {
    font-family: 'Material Icons';
    content: "\e8ff";
    font-size: 36px;
    position: absolute;
    bottom: -10px;
    right: 6px;
    color: gray;
    opacity: 0.6;
    font-weight: normal;
}


p {
    margin:0 0 0.8em 0;
    line-height : 1.8em;
}
a,
a :link,
a :visited,
a :hover,
a :active {
    text-decoration: none;
}

a.disabled{
    pointer-events: none;
}

code, kbd, pre, samp {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    white-space: pre-wrap;
}

code
{
    display: block;
}

/* Shadow */
.has-shadow-default {
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}

.has-shadow-deep {
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* Layer Order */
.zindex-1024 {
    z-index:1024;
}

/* Text align */
.text-center {
    text-align:center;
}

.text-right {
    text-align:right;
}

.text-left {
    text-align:left;
}
.vertical-bottom {
    vertical-align: bottom;
}

/* Width */
.width-100per {
    width:100%;
}
.max-width-800px {
    max-width:800px;
}
.max-width-1024px {
    max-width:1024px;
}
.child-width-49per > * {
    width:49%;
}
.child-width-50per > * {
    width:50%;
}

/* float */
.float-right {
    float:right;
}

/* flex */
.flex {
    display: flex;
}
.inline-flex{
    display:inline-flex;
}
.flex-wrap-wrap {
    flex-wrap:wrap;
}
ul.flex,
ul.inline-flex {
    list-style: none;
    padding-left:0px;
}

/* flex direction */
.flex-direction-column {
    flex-direction:column;
}
.flex-direction-row {
    flex-direction:row;
}
.flex-direction-row-rev {
    flex-direction:row-reverse;
}


/* flex justfy content  */
.flex-justify-content-space-between {
    justify-content: space-between;
}


/* Grid */
.grid {
    display: grid;
}


/* list style */
.list-style-none {
    list-style: none;
    padding:0;
}

/* clear float */
.clearboth {
    clear: both;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

/* Display */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.display-none {
    display:none;
}

/* Position */
.position-fixed {
    position:fixed;
}
.position-relative {
    position:relative;
}

/* Margin */
.margin-0 {
    margin:0;
}
.margin-top-0 {
    margin-top:0;
}
.margin-top-1_8_em {
    margin-top:1.8em;
}
.margin-bottom-0 {
    margin-bottom:0;
}

/* font-size */
.font-size-0_8_em {
    font-size:0.8em;
}

/* Centering */
.center-block {
    top: 50%;
    left: 50%;
    position: relative;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.horizontal-center-block {
    left: 50%;
    position: relative;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.horizontal-right-block {
    left: 100%;
    position: relative;
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.vertical-center-block {
    top: 50%;
    position: relative;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

/* Font Weight */
.font-weight-normal {
    font-weight:normal;
}

h1.product-name {
    & > span {
        display:block;
        font-size:0.5em;
    }
}

/* Pc */
@media screen and (min-width:992px) {
    .pc-hide {
        display:none!important;
    }
}
/* Tablet */
@media screen and (min-width:768px) and (max-width:991.9px) {
    .tablet-hide {
        display:none!important;
    }
    /* flex direction */
    .flex-direction-column-on-tablet {
        flex-direction:column;
    }
    .flex-direction-column-on-tablet > * {
        width:100%!important;
    }
}

/* Smart Phone */
@media only screen and (max-width: 767.9px) {
    .phone-hide {
        display:none!important;
    }
    /* flex direction */
    .flex-direction-column-on-smartphone {
        flex-direction:column;
    }
    .flex-direction-column-on-smartphone > * {
        width:100%!important;
    }

    /* width */
    .sp-width-100per {
        width:100%!important;
    }

    .center-block-on-smartphone {
        left: 50%;
        position: relative;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

}