@charset "UTF-8";

/*      [Reset(html5)]
-----------------------------------------------*/
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, 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%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul,ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

input,
textarea,
select {
  font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
  font-size:16px;
}

/*wordpress reset css*/
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

select {
    text-transform: none;
}

button {
    overflow: visible;
}

button,
input,
select,
textarea {
    width: 100%;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
    opacity: .5;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 0.4375em;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #d1d1d1;
    margin: 0 0 1.75em;
    padding: 0.875em;
}

fieldset > :last-child {
    margin-bottom: 0;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

optgroup {
    font-weight: bold;
}

small {
    font-size:.8rem;
    color:#666;
}

/*      [ General Setting]
-----------------------------------------------*/
html{
    scroll-behavior: smooth;
    height: 100%; 
    overflow: auto;
    position:relative;
}

body{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  letter-spacing:.1rem;
    word-break: break-all;
    -webkit-text-size-adjust: 100%;
    background-color:#fffcf5;
    color:#231815;
    line-height:1.9em;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    position:relative;
    
    width:100%;
    height:100%;
}
a{

}
a:link {
    color: #231815;
    text-decoration: none;
}
a:visited {
    color: #231815;
    text-decoration: none;
}
a:hover {
    color: #f29600;
    text-decoration: none;
}
a:active {
    color: #231815;
    text-decoration: none;
}
a:hover img{
    opacity:0.8;
}

h2 {
    font-size:1.5rem;
    line-height:2.0rem;
    letter-spacing: .4rem;
    padding-bottom:10px;
    border-bottom:solid 1px #c9bc9c;
    display:inline-block;
}

h3 {
    font-size:1.5rem;
    line-height:2.0rem;
    letter-spacing: .4rem;
    padding-bottom:10px;
}

h4{
    font-size:1.2rem;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
h5{
    font-size:1.0rem;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

p{
    letter-spacing:0;
    text-align: justify;
    text-justify: inter-ideograph;
    line-break: strict;
}

.space-b{
    clear:both;
    display:block;
    width:100%;
    height:4rem;
}

/*      [Common]
-----------------------------------------------*/
main {
    width:100%;
    overflow:hidden;
}
section{
    position: relative;
    width:100%;
    margin:0 auto;
}
.inner{
    position: relative;
    max-width:1160px;
    margin:0 auto;
}

.inner2{
    position: relative;
    max-width:1000px;
    margin:0 auto;
}

#white,#inquiry{
    position: relative;
    max-width:100%;
    width:auto;
    background:#fff;
}

.box{
    position: relative;
    max-width:800px;
    margin:0 auto;
    padding:0;
}

.img-fluid{
  width:100%;
  height: auto;
}

.center,.center_pc{
    text-align:center;
}

/*      [Header]
-----------------------------------------------*/
#header{
    height:30px;
    padding:35px 0;
}
h1.title{
    display: none;
}

.site_name{
    height:25px;
}
.logo{
    position: relative;
    padding-left:40px;
    float:left;
}
.logo:after{
    content:"";
    position:absolute;
    width:25px;
    height:25px;
    z-index:1;
    background:url(images/title_omoiyari.png) no-repeat center;
    background-size:contain;
}

.menu {
    float:right;
    width:500px;
    font-size:.8rem;
    margin-right:180px;
}
.menu ul > li {
    position: relative;
    float:left;
    margin-left:1.5rem;
    font-weight:bold;
    color:#b5aca3;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.menu ul > li > a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.menu ul > li > a:hover {
    color:#231815;
}
.menu ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #c9bc9c;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.menu ul > li > a:hover::after {
  transform: scale(1, 1);
}


/* Submenu */
.menu ul li ul{
    position: absolute;
    display:block;
    line-height:1.4rem;
    background-color: #c9bc9c;
    color:#231815;
    white-space: nowrap;
    top: 30px;
    left: -100px;
    padding:10px 20px;
    display: none;
    z-index:999;
    transition: transform .3s;
}
.menu ul li ul li{
    display: block;
    margin-bottom:0.4rem;
    margin-left:0;
    float:none;
}
.menu ul li:hover ul{
    display: block;
}

.menu ul li ul li a{
    color: #444;
}
.menu ul li ul li a:hover{
    color: #fffcf5;
}


.single-slider{
    position: relative;
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}
.single-slider .slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 770;
}

.info a{
	//border-bottom: dotted 1px #f29600;
}

.blog img{
    max-width:100%;

}

.mv_story01 {
    position: relative;
    width:100%;
    height: 100px;
    background:url(images/obi01.jpg) repeat-x top left;
    background-size:auto 100px;
    animation: bgscroll 50s linear infinite;
}

@-webkit-keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
 }

 @keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
 }

.mv_story02 {
    position: relative;
    width:100%;
    height: 100px;
    background:url(images/obi02.jpg) repeat-x top left;
    background-size:auto 100px;
    animation: bgscroll2 50s linear infinite;
}
@-webkit-keyframes bgscroll2 {
  0% {background-position: 50vw 0;}
  100% {background-position: 0 0;}
 }

 @keyframes bgscroll2 {
  0% {background-position: 50vw 0;}
  100% {background-position: 0 0;}
 }

#tokucho ul,#product ul,#inquiry ul {
    position: relative;
    text-align:center;

    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
#tokucho li{
    position: relative;
    display: inline-block;
    padding:1% 2%;
    margin-right:1%;
    //width:calc(28.5% - 2px);
    width:calc(45.5% - 2px);
    border:solid 1px #c9bc9c;
    background:#fff;
    border-radius: 40px;
}

#tokucho li:last-child{
    margin-right:0;
}


#tokucho li:before {
    top:-20px;
    left:45%;
    content:"";
    position:absolute;
    width:35px;
    height:35px;
    z-index:1;
}

img.flame{
    border-radius: 25px;
}


#koe ul#white{
    border-top:solid 4px #c9bc9c;
    padding:2%;

    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

#koe li{
    float:left;
    width:44%;
}
#koe li.com{
    width:54%;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

#koe li.com a{
    position: relative;
    display: block;
    width:80%;
    padding:5%;
    padding-right:0%;
    height:85%;
}
#koe li.com.rr a{
   padding-left:15%;
}

.bot_link {
    position:relative;
    display: block;
    width:100%;
    height:30px;
}

.bot_link:after {
    bottom:0;
    right:0;
    content:"";
    position:absolute;
    width:50px;
    height:30px;
    z-index:1;
    background:url(images/bot_link.svg) no-repeat center;
    background-size:contain;
}

.rr .bot_link:after {
    right:auto;
    left: 0;
}

#koe li.com a:hover{
    color: #231815;
}
#koe li.com a:hover .bot_link:after {
    background:url(images/bot_link_hover.svg) no-repeat center;
    background-size:contain;
}

#product li{
    position: relative;
    display: inline-block;
    padding:0;
    height:auto;
    margin-right:1%;
    width:32.5%;
}
#product li:last-child{
    margin-right:0;
}


#product li .obi{
    position: absolute;
    display:inline-block;
    color:#fff;
    top:60%;
    right:0;
    width:80%;
    min-height:30%;
    padding:7%;
    text-align:left;
    z-index:9;
}
#product li:nth-child(1) .obi {
    background:#de535e;
}
#product li:nth-child(2) .obi {
    background:#367294;
}
#product li:nth-child(3) .obi {
    background:#e6953c;
}

#product li .obi p{
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size:0.9rem;
    line-height:1.4rem;
}

#product li .obi h3{
    font-size:1.1rem;
    line-height:1.5rem;
    letter-spacing: 0rem;
}

#product li .obi:after{
    bottom:0;
    right:0;
    content:"";
    position:absolute;
    width:50px;
    height:30px;
    z-index:1;
}
#product li:nth-child(1) .obi:after{
    background:url(images/bot_soft.svg) no-repeat right;
    background-size:contain;
}
#product li:nth-child(2) .obi:after{
    background:url(images/bot_shio.svg) no-repeat right;
    background-size:contain;
}
#product li:nth-child(3) .obi:after{
    background:url(images/bot_kind.svg) no-repeat right;
    background-size:contain;
}

#product li .obi:hover{
    opacity:0.5;
}


#product li:after{
    content: "";
    display: block;
    padding-bottom: 30%; /* 1:1 */
}

#inquiry li{
    position: relative;
    margin-right:5%;
    width:47.5%;
    display:inline-block;
}

#inquiry li a{
    display: block;
    width:97%;height:100%;
    border:solid 1px #c9bc9c;
    border-radius: 40px;
    background:#fff;
}
#inquiry li a:before {
    content: "";
    display: block;
    padding-top: 75%
}
#inquiry .centin{
  position: absolute;
  width:100%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#inquiry li:last-child{
    margin-right:0;
}

#inquiry .img-fluid{
    width:90%;
}



/*      [Product]
-----------------------------------------------*/

#product-head{
    position: relative;
    max-width:100%;
    width:auto;
}

#product-head ul.product,#product-view ul.product {
    position: relative;
    text-align:center;

    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
#product-head .product li,#product-view ul.product li{
    position: relative;
    display: inline-block;
    padding:1% 2%;
    margin-right:1%;
    width:28.5%;
}

#product-head .product li:last-child,#product-view ul.product li:nth-of-type(3n){
    margin-right:0;
}
#product-head .off {
    opacity: 0.5;
}

#product-list .universal {
    position: relative;
    display: block;
    margin:0 0.5%;
    padding:2% 8%;
    width:auto;
    border:solid 1px #c9bc9c;
    border-radius: 40px;
}
#product-list .universal .com{
    width:60%;
}
#product-list .universal .img{
    position:absolute;
    width:24%;
    top:0;bottom:0;
    right:8%;
    margin: auto;
}

#product-list h2 {
    font-size:1.5rem;
    line-height:2.0rem;
    letter-spacing: .2rem;
    padding-bottom:10px;
    display:inline-block;
}

#product-list ul,#product-view.recipe ul {
    position: relative;
    text-align:center;

    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
#product-list li{
    position: relative;
    display: inline-block;
    width:calc(19.0% - 1rem);
    margin-right:1rem;
    margin-bottom:1rem;
}
#product-list li:nth-of-type(4n) {
    margin-right:0;
}


.clickable {
    cursor: pointer;
}
#product-list .waku {
    padding:1% 3%;
    border-radius: 40px;
    background:#fff;
    text-align:center;
}
#product-list .waku h3 {
    font-size:1.4rem;
    line-height:1.8rem;
    letter-spacing: .1rem;
    padding-bottom:20px;
}

#product-list .waku .mark{
    position: relative;
    text-align:left;
    width:100%;
    height:60px;
    z-index:9;
    margin-top:.2rem;
}
#product-list .waku .mark dd{
    position: absolute;
    display: block;
    width:30%;
    height:auto;
}
#product-list .waku .mark dd:nth-child(1){
    left:0;
}
#product-list .waku .mark dd:nth-child(2){
    left:0;right:0;margin: auto;
}
#product-list .waku .mark dd:nth-child(3){
    right:0;
}

#product-list .pho{
    position: relative;
}
#product-list .waku .photo{
    border-radius: 30px;
}
#product-list .waku .pack{
    position: absolute;
    border-radius: 5px;
    width:30%;
    bottom:-2%;
    right:-5%;
}
#product-list .uni{
    width:90%;
    margin:1rem 5% 0;
}


#product-list.series-soft h2,
#product-view.series-soft h2 {
    color:#df535e;
    border-bottom:none;
}
#product-list.series-soft .waku,
#product-view.series-soft .waku{
    border:solid 1px #df535e;
}
#product-list.series-soft .waku span,
#product-view.series-soft .waku span {
    color: #df535e;
}
#product-list.series-soft dl hr,
#product-view.series-soft dl hr { 
    border-top:1px solid #df535e;
}

#product-list.series-shio h2,
#product-view.series-shio h2 {
    color:#2f7194;
    border-bottom:none;
}
#product-list.series-shio .waku,
#product-view.series-shio .waku{
    border:solid 1px #2f7194;
}
#product-list.series-shio .waku span,
#product-view.series-shio .waku span {
    color: #2f7194;
}
#product-list.series-shio dl hr,
#product-view.series-shio dl hr { 
    border-top:1px solid #2f7194;
}

#product-list.series-kind h2,
#product-view.series-kind h2 {
    color:#e6953c;
    border-bottom:none;
}
#product-list.series-kind .waku,
#product-view.series-kind .waku{
    border:solid 1px #e6953c;
}
#product-list.series-kind .waku span,
#product-view.series-kind .waku span {
    color: #e6953c;
}
#product-list.series-kind dl hr,
#product-view.series-kind dl hr { 
    border-top:1px solid #e6953c;
}



#product-view .waku {
    position: relative;
    display: block;
    padding:4% 5%;
    width:90%;
    border-radius: 40px;
    background:#fff;
    text-align:center;
}
#product-view .com {
    display: block;
    width:100%;
    text-align:left;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#product-view .bot {
    display: inline-block;
    height:80px;
    vertical-align: top;
}
#product-view dt{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width:40%;
    margin-right:7%;
}
#product-view dd{
    position: relative;
    display: inline-block;
    width:52%;
}

#product-view .mark{
    position: relative;
    text-align:left;
    width:100%;
    height:50px;
    z-index:9;
    margin-top:.2rem;
}
#product-view .mark img{
    float:right;
    height:50px;
    width:auto;
    margin-right:.5rem;
}

#product-view dt .photo{
    border-radius: 30px;
}
#product-view dt .pack{
    position: absolute;
    border-radius: 5px;
    width:30%;
    bottom:-5%;
    right:-10%;
}



#product-view.recipe .waku{
    display: inline-block;
    border:solid 1px #c9bc9c;
    width:calc(42.0% - 1rem);
    margin-right:1rem;
    margin-bottom:1rem;
    padding:3% 4%;
    border-radius: 30px;
}
#product-view.recipe .waku:last-child {
    margin-right:0;
}

#product-view.recipe li{
    text-align:left;
}

#product-view .rcp li{
    display: inline-block;
    min-width:40%;
    margin-right:10%;
    white-space: nowrap;
}

#product-view.recipe dt{
    width:calc(50% - 1rem);
    margin-right:1rem;
}
#product-view.recipe dd{
    position: relative;
    display: inline-block;
    width:38%;height:100%;
    margin:0 5%;
}

#product-view.recipe dd:before {
    content: "";
    display: block;
    padding-top: 75%
}
#product-view.recipe .spec{
    border-top:solid 1px #c9bc9c;
    border-bottom:solid 1px #c9bc9c;
    background:#fff;
    position: absolute;
    padding:3% 8%;
    width:100%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

#product-view .icon{
    display: inline-block;
    height:1.0rem;
    margin-right:.3rem;
}

.recipe ol{
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
}

.recipe ol li{
  text-indent: -1.6rem;
  padding-left: 1.6rem;
}
.recipe ol li:before {
  counter-increment: item;
  content: counter(item)'.';
  /* 以下は自由に装飾... */
  padding-right: .5em;
  font-weight: bold;
  color: #c9bc9c;
  font-size:1.4rem;
}



/*      [Story]
-----------------------------------------------*/

#story-head h3{
    line-height:3.0rem;
    letter-spacing:0.3rem;
}

#story{
    position: relative;
    max-width:100%;
    width:auto;
}

#story h3{
    width:100%;
    text-align:center;
}

#story p{
    line-height:2.6rem;
}


/*      [Voice]
-----------------------------------------------*/

.animated{
    opacity: 0;
}
#voice-head .sen1{
    position: absolute;
    width: 980px;
    max-width: 100%;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
}
#voice-head .sen2{
    position: absolute;
    width: 650px;
    margin: auto;
    top: 0;
    right: 0;
    left: 0;
}

#voice {
    position: relative;
    width: 100%;
}
#voice .com{
    position: absolute;
    z-index: 1;
    width: calc(100% - 2rem);
    height: 100%;
    top: 0;
    left: 0;right: 0;
    margin: auto;
}
#voice .com li{
    position: absolute;
    animation-duration: 1s;
    z-index: 2;
}

#voice .com1 li:nth-child(1){
    width: 27%;left: 15%;top: 5%;
}
#voice .com1 li:nth-child(2){
    width: 30%;left: 2%;top: 26%;
}
#voice .com1 li:nth-child(3){
    width: 27%;left: 5%;top: 70%;
}
#voice .com1 li:nth-child(4){
    width: 40%;left: 2%;top: 90%;
}

#voice .com1 li:nth-child(5){
    width: 38%;right: 0%;top: 34%;
}
#voice .com1 li:nth-child(6){
    width: 35%;right: 15%;top: 51%;
}
#voice .com1 li:nth-child(7){
    width: 30%;right: 3%;top: 64%;
}
#voice .com1 li:nth-child(8){
    width: 31%;right: 6%;top: 86%;
}


#voice .com2 li:nth-child(1){
    width: 47%;left: 0%;top: 10%;
}
#voice .com2 li:nth-child(2){
    width: 30%;left: 7%;top: 31%;
}
#voice .com2 li:nth-child(3){
    width: 26%;left: 0%;top: 57%;
}
#voice .com2 li:nth-child(4){
    width: 31%;left: 3%;top: 76%;
}

#voice .com2 li:nth-child(5){
    width: 42%;right: 0%;top: 50%;
}
#voice .com2 li:nth-child(6){
    width: 32%;right: 6%;top: 74%;
}


#voice .com3 li:nth-child(1){
    width: 47%;left: 0%;top: 10%;
}
#voice .com3 li:nth-child(2){
    width: 40%;left: 15%;top: 61%;
}
#voice .com3 li:nth-child(3){
    width: 55%;left: 0%;top: 78%;
}

#voice .com3 li:nth-child(4){
    width: 38%;right: 10%;top: 5%;
}
#voice .com3 li:nth-child(5){
    width: 32%;right: 0%;top: 24%;
}
#voice .com3 li:nth-child(6){
    width: 33%;right: 7%;top: 72%;
}
#voice .com3 li:nth-child(7){
    width: 38%;right: 12%;top: 90%;
}


#voice .com4 li:nth-child(1){
    width: 43%;left: 3%;top: 10%;
}
#voice .com4 li:nth-child(2){
    width: 37%;left: 8%;top: 67%;
}
#voice .com4 li:nth-child(3){
    width: 45%;right: 0%;top: 16%;
}


#voice .pho1,#voice .pho2,#voice .pho3{
    z-index: 0;
}
#voice .pho1{
    width: 85%;
    margin: 3rem auto;
}
#voice .pho1 li:nth-child(1){
    width: 65%;
    margin: 0 0 0 auto;
}
#voice .pho1 li:nth-child(2){
    width: 45%;
    margin: 0 auto 0 0;
    margin-top: -4%;
}
#voice .pho1 li:nth-child(3){
    width: 55%;
    margin: 0 auto;
    margin-top: -2%;
}
#voice .pho1 li:nth-child(4){
    width: 0%;
}

#voice .pho2 li:nth-child(1){
    width: 60%;
    margin: 0 0 0 auto;
}
#voice .pho2 li:nth-child(2){
    width: 45%;
    margin: 0 0 0 24%;
    margin-top: 5%;
}
#voice .pho2 li:nth-child(3){
    width: 0%;
}

#voice .pho3 li:nth-child(1){
    width: 57%;
    margin: 0 auto 0 0;
    margin-top: 16%;
    margin-left: 5%;
}
#voice .pho3 li:nth-child(2){
    width: 37%;
    margin: 0 0 0 auto;
    margin-top: -21%;
    margin-right: 5%;
}
#voice .pho3 li:nth-child(3){
    width: 37%;
    margin: auto;
}

#voice .pho4 li:nth-child(1){
    position: absolute;
    width: 40%;
    margin: 10% auto 0;
    left: 0;right: 0;
    z-index: 3;
}
#voice .pho4 li:nth-child(2){
    width: 75%;
    margin: auto;
}


#voice-gra .obi_q,#voice-gra .obi_a div{
    padding: 2rem 0;
    background: #fff;
    border-top:solid 4px #C9BC9C;
    text-align: center;
    font-size:1.2rem;
    line-height:1.8rem;
    font-weight: 700;
}
#voice-gra .obi_q{
    width: calc(100% - 4rem);
    margin: 0 2rem;
}

#voice-gra .obi_a div{
    width: 92%;
}

#voice-gra ul{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

#voice-gra .visible_pc li{
    display: block;
    justify-content: center;
    align-items: center;
    padding:5% 8% 3%;
    width: 84%;
}

#voice-gra .visible_sp li{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:3% 4% 0%;
    width: 42%;
    float: left;
}
#voice-gra li font {
    color: #DF5911;
}

.voice_bot li{
    width: 30%;
    padding-right: 4.5%;
    float: left;
}
.voice_bot li:nth-child(3){
    padding-right: 0;
}


@media screen and (max-width: 980px) {
    #voice-head .sen1{
        display: none;
    }
}

/*      [SmartPhone]
-----------------------------------------------*/
@media screen and (max-width: 640px) {

    #voice-head .sen1{
        display: block;
        width: 120%;
        max-width: 120%;
        top: auto;
        bottom: 15%;
        left: -10%;
    }
    #voice-head .sen2{
        width: 100%;
        top: auto;
        bottom: 0;
    }

    #voice-head h3{
        font-size: 1.0rem;
        letter-spacing: 0rem;
        padding: 0 2rem 1.5rem;
    }
    #voice-gra .obi_q,#voice-gra .obi_a div{
        font-size: 1.0rem;
        letter-spacing: 0rem;
    }

    #voice-gra .visible_sp li{
        display: block;
        padding:3% 12%;
        width: 76%;
        float: auto;
    }
    #voice-gra .obi_a div{
        width: 100%;
    }
    .voice_bot li{
        width: 70%;
        padding: 0.5rem 15%;
        float: auto;
    }


    #voice .pho1{
        width: 100%;
        margin: 6rem auto;
    }
    #voice .pho1 li:nth-child(1){
        width: 100%;
        margin: auto;
        margin-top: 10%;
    }
    #voice .pho1 li:nth-child(2){
        width: 70%;
        margin: 0;
        margin-top: 50%;
    }
    #voice .pho1 li:nth-child(3){
        width: 100%;
        margin: auto;
        margin-top: 20%;
    }
    #voice .pho1 li:nth-child(4){
        width: 100%;
    }

    #voice .pho2 li:nth-child(1){
        width: 100%;
        margin: auto;
    }
    #voice .pho2 li:nth-child(2){
        width: 80%;
        margin: 0 0 0 auto;
        margin-top: 80%;
    }
    #voice .pho2 li:nth-child(3){
        width: 100%;
        margin-bottom: 20%;
    }

    #voice .pho3 li:nth-child(1){
        width: 100%;
        margin: 20% auto 0;
    }
    #voice .pho3 li:nth-child(2){
        width: 70%;
        margin: 50% 0 0 auto;
    }
    #voice .pho3 li:nth-child(3){
        width: 100%;
        margin: 50% auto 0;
    }

    #voice .pho4 li:nth-child(1){
        width: 70%;
        margin: 25% auto 0;
    }
    #voice .pho4 li:nth-child(2){
        width: 100%;
        margin: 0 auto 80%;
    }

    #voice .com1 li:nth-child(1){
        width: 64%;left: 0%;top: -7%;
    }
    #voice .com1 li:nth-child(2){
        width: 70%;left: 2%;top: 29%;
    }
    #voice .com1 li:nth-child(3){
        width: 64%;left: 5%;top: 82%;
    }
    #voice .com1 li:nth-child(4){
        width: 90%;left: 10%;top: 106%;
    }

    #voice .com1 li:nth-child(5){
        width: 86%;right: 0%;top: 18%;
    }
    #voice .com1 li:nth-child(6){
        width: 80%;right: 0%;top: 50%;
    }
    #voice .com1 li:nth-child(7){
        width: 70%;right: 3%;top: 73%;
    }
    #voice .com1 li:nth-child(8){
        width: 72%;right: 0%;top: 92%;
    }


    #voice .com2 li:nth-child(1){
        width: 100%;left: 0%;top: 23%;
    }
    #voice .com2 li:nth-child(2){
        width: 70%;left: auto;right: 0%;top: 33%;
    }
    #voice .com2 li:nth-child(3){
        width: 62%;left: 0%;top: 43%;
    }
    #voice .com2 li:nth-child(4){
        width: 76%;left: 0%;top: 73%;
    }

    #voice .com2 li:nth-child(5){
        width: 94%;right: 0%;top: 85%;
    }
    #voice .com2 li:nth-child(6){
        width: 74%;right:auto;left: 5%;top: 98%;
    }


    #voice .com3 li:nth-child(1){
        width: 100%;left: 0%;top: 2%;
    }
    #voice .com3 li:nth-child(2){
        width: 85%;left: 0%;top: 77%;
    }
    #voice .com3 li:nth-child(3){
        width: 100%;left: 0%;top: 63%;
    }

    #voice .com3 li:nth-child(4){
        width: 76%;right: 0%;top: 30%;
    }
    #voice .com3 li:nth-child(5){
        width: 66%;right: auto;left: 0%;top: 42%;
    }
    #voice .com3 li:nth-child(6){
        width: 76%;right: 0%;top: 86%;
    }
    #voice .com3 li:nth-child(7){
        width: 86%;right: auto;left: 0%;top: 94%;
    }


    #voice .com4 li:nth-child(1){
        width: 90%;left: 0%;top: 111%;
    }
    #voice .com4 li:nth-child(2){
        width: 80%;left: auto;right: 0%;top: 157%;
    }
    #voice .com4 li:nth-child(3){
        width: 95%;right: 0%;top: 10%;
    }

    .rr .bot_link:after {
        left:auto;
        right: 0;
    }
}



/*      [Footer]
-----------------------------------------------*/

#footer{
    border-top:solid 6px #df5911;
    height:100px;
    padding-top:75px;
}

#footer .site_name{
    height:20px;
}
#footer .logo{
    padding-left:0;
}
#footer .logo:after{
    width:20px;
    height:20px;
}

#footer .menu {
    float:right;
    width:auto;
    font-size:.8rem;
    margin-right:0;
}
#footer .menu li {
    float:left;
    margin-left:1.5rem;
}

#footer .tel-foot{
    width:80%;
    max-width:500px;
    margin: 5% 10%;
}

#footer p{
    font-size:.8rem;
    text-align:center;
}


/* -----------------------------------------------------------------
   parallax
   ----------------------------------------------------------------- */

.tel-float {
    position: fixed;
    width:150px;
    right:0;
    top:20px;
    z-index:1000;
}
.tel-float li {
    width:165px;
}
.fade-in1{
    animation-name:sample01;
    animation-duration:1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.fade-in2{
    animation-name:sample02;
    animation-duration:1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes sample01 {
    0% {
        transform: translateX(150px);
    }
    70%{
        transform: translateX(0);
    }
}
@keyframes sample02 {
    0% {
        transform: translateX(150px);
    }
    30% {
        transform: translateX(150px);
    }
    100%{
        transform: translateX(0);
    }
}


.ZP{
    z-index:99;
}

.plx{
    position: absolute;
    z-index:2;
}

.P1{
  left: -70px;
  top: -100px;
  width:300px;
}
.P2{
  right: -130px;
  bottom: 130px;
  width:300px;
}
.P3{
  left: -50px;
  top: -200px;
  width:250px;
}
.P4{
  right: -100px;
  top: 230px;
  width:300px;
}
.P5{
  left: -80px;
  top: -50px;
  width:250px;
}
.P6{
  right: 50px;
  bottom: -100px;
  width:300px;
}



#story .plx{
    z-index:-2;
}

.P7{
  left: -120px;
  top: 270px;
  width:250px;
}
.P8{
  right: -100px;
  bottom: 200px;
  width:300px;
}
.P9{
  left: -120px;
  top: 570px;
  width:250px;
}
.P10{
  right: -120px;
  bottom: 600px;
  width:250px;
}
.P11{
  left: -120px;
  top: 300px;
  width:250px;
}




/* -----------------------------------------------------------------
   form
   ----------------------------------------------------------------- */

    input::placeholder,textarea::placeholder {
      color: #bbb;
    }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    background:#fff;
    font-size:1.0rem;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  }

  #EditForm th,#EditForm td{
    position:relative;
    border: solid 1px #c9bc9c;
    border-collapse: collapse;
    font-weight:500;
    text-align:left;
  }

  #EditForm th {
    width: 29.999999%;
    white-space: nowrap;
  }

  #EditForm td {
    max-width: 59.999999%;
  }
  #EditForm .check td {
    margin-left: 10%;
    color:#333;
  }

  #EditForm th,#EditForm td {
    line-height: 1.5;
    padding: 15px 0 15px 20px;
    vertical-align: middle;
  }

  #EditForm input,#EditForm select,#EditForm textarea {
    padding: 4px;
    border: 1px solid #aaa;
    font-size:1.0rem;
    background-color: #fff;
    background-image: none;
  }
  #EditForm textarea {
      overflow-y: scroll;
  }

  #EditForm input {
      height: 30px;
  }

  #EditForm select {
      height: 40px;
      width:auto;
  }

  #EditForm .help-inline {
      display: inline-block;
      color: #a3a3a3;
      margin: 10px auto;
      font-size:0.9rem;
  }



  #EditForm input[type=checkbox],
  #EditForm input[type=radio] {
      display: inline-block;
      margin-right: 6px;
  }
  #EditForm input[type=checkbox] + label,
  #EditForm input[type=radio] + label {
      position: relative;
      display: inline-block;
      margin-right: 2rem;
      cursor: pointer;
  }

  #EditForm input[type=checkbox],
  #EditForm input[type=radio] {
      display: none;
      margin: 0;
  }
  #EditForm input[type=checkbox] + label,
  #EditForm input[type=radio] + label {
      padding: 0 0 0 24px;
  }
  #EditForm input[type=checkbox] + label::before,
  #EditForm input[type=radio] + label::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: block;
      width: 18px;
      height: 18px;
      margin-top: -9px;
      background: #FFF;
  }
  #EditForm input[type=radio] + label::before {
    border-radius: 9px;
  }

  #EditForm input[type=checkbox] + label::before,
  #EditForm input[type=radio] + label::before {
      border: 2px solid #ccc;
  }

  #EditForm input[type=checkbox]:checked + label::after,
  #EditForm input[type=radio]:checked + label::after {
      content: "";
      position: absolute;
      top: 50%;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: block;
  }
  #EditForm input[type=checkbox]:checked + label::after,
  #EditForm input[type=radio]:checked + label::after {
      left: 3px;
      width: 16px;
      height: 8px;
      margin-top: -8px;
      border-left: 3px solid #E71063;
      border-bottom: 3px solid #E71063;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }

/*お問い合わせボタン*/
a.btn_contact,a.btn_other{
  color: #FFF;
}
.btn_contact,.btn_other{
  color: #FFF;
  font-size: 1.6em;
  font-weight:bold;
  line-height: 2.0rem;
  cursor: pointer;
  background:#d80c18;
  text-decoration: none;
    -webkit-border-radius: .3em;
    -webkit-background-clip: padding-box;
    -moz-border-radius: .3em;
    -moz-background-clip: padding;
    border-radius: .3em;
}
.btn_other{
    background:#534741;
}
.btn_contact,.btn_other {
  display: inline-block;
  padding: 15px 60px 15px 60px;
}
.btn_contact:hover,.btn_other:hover {
  opacity:0.8;
}

#EditForm th.impro span {
    position: relative;
    padding-right:60px;
}
.impro span::after {
  content:"必須";
  position:absolute;
  font-size:.8em;
  color:#fff;
  background: #df5912;
  padding:0 5%;
  right:0px;
  top:0;
  z-index:999;
}
#EditForm .nonimp {
    display:none;
}

#EditForm #emailCheckError{
    font-size:.8em;
    color:#df5912;
}

form .err{
    background-color: #FFE3E3 !important
}


@media screen and (max-width: 640px) {
    #EditForm table {
        width:100%;
    }
    #EditForm th {
        padding: 10px 0 10px 10px;
        font-weight: bold;
    }
    
    #EditForm td {
        padding-bottom: 3rem;
    }
    #EditForm td,#EditForm .check td {
        padding-top: 10px;
        margin-left: 0;
    }
    #EditForm td,#EditForm th {
        display: block;
        padding-right: 0;
        padding-left: 0;
        width: calc(100% - 20px) !important;
        max-width: 100% ;
        border: 0;
        border-bottom: solid 1px #c9bc9c;
    }

    #EditForm td textarea,#EditForm td input[type="text"],#EditForm td input[type="email"] {
        width: 100%;
    }
    #EditForm .help-inline {
        margin-left: 0;
        margin-top: 10px;
    }
    #nav_toggle {
      top: 0 !important;
    }
}


/*      [Clearfix]
-----------------------------------------------*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size:0;
    clear: both;
    visibility:hidden;
}
.clearfix{
    display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix{
    height: 1%;
}
.clearfix{
    display:block;
}
/* End Hack */ 
.clear{clear:both;}


/* -----------------------------------------------------------------
   input長
   ----------------------------------------------------------------- */
.col-0{
  max-width: 2%;
}
.col-1{
  max-width: 100px;
  width:20%;
}
.col-2{
  width:25%;
  max-width: 300px;
}
.col-3{
  max-width: 400px;
  width:40%;
}
.col-4{
  max-width: 500px;
  width:60%;
}
.col-5{
  max-width: 600px;
  width:75%;
}
.col-6{
  max-width: 700px;
  width:85%;
}
.col-7{
    width:95%;
    max-width: 800px;
}


/* -----------------------------------------------------------------
   margin
   ----------------------------------------------------------------- */
.mb--1{
    margin-bottom:-1rem !important;
}
.mb-0{
    margin-bottom:0rem !important;
}
.mb-1{
    margin-bottom:1rem !important;
}
.mb-2{
    margin-bottom:2rem !important;
}
.mb-3{
    margin-bottom:3rem !important;
}
.mb-4{
    margin-bottom:4rem !important;
}
.mb-5{
  margin-bottom:5rem !important;
}
.mb-6{
  margin-bottom:6rem !important;
}
.mb-7{
  margin-bottom:7rem !important;
}
.mb-8{
  margin-bottom:8rem !important;
}

.mt--1{
    margin-top:-1rem !important;
}
.mt-0{
    margin-top:0rem !important;
}
.mt-1{
    margin-top:1rem !important;
}
.mt-2{
    margin-top:2rem !important;
}
.mt-3{
    margin-top:3rem !important;
}
.mt-4{
    margin-top:4rem !important;
}
.mt-5{
  margin-top:5rem !important;
}
.mt-6{
  margin-top:6rem !important;
}
.mt-7{
  margin-top:7rem !important;
}
.mt-8{
  margin-top:8rem !important;
}


.my-0{
    margin-top:0rem !important;
    margin-bottom:0rem !important;
}
.my-1{
    margin-top:1rem !important;
    margin-bottom:1rem !important;
}
.my-2{
    margin-top:2rem !important;
    margin-bottom:2rem !important;
}
.my-3{
    margin-top:3rem !important;
    margin-bottom:3rem !important;
}
.my-4{
    margin-top:4rem !important;
    margin-bottom:4rem !important;
}
.my-5{
  margin-top:5rem !important;
  margin-bottom:5rem !important;
}
.my-6{
  margin-top:6rem !important;
  margin-bottom:6rem !important;
}
.my-7{
  margin-top:7rem !important;
  margin-bottom:7rem !important;
}
.my-8{
  margin-top:8rem !important;
  margin-bottom:8rem !important;
}

.ml--1{
    margin-left:-1rem !important;
}
.ml-0{
    margin-left:0rem !important;
}
.ml-1{
    margin-left:1rem !important;
}
.ml-2{
    margin-left:2rem !important;
}
.ml-3{
    margin-left:3rem !important;
}
.ml-4{
    margin-left:4rem !important;
}

.mr--1{
    margin-right:-1rem !important;
}
.mr-0{
    margin-right:0rem !important;
}
.mr-1{
    margin-right:1rem !important;
}
.mr-2{
    margin-right:2rem !important;
}
.mr-3{
    margin-right:3rem !important;
}
.mr-4{
    margin-right:4rem !important;
}


.mx-0{
    margin-left:0rem !important;
    margin-right:0rem !important;
}
.mx-1{
    margin-left:1rem !important;
    margin-right:1rem !important;
}
.mx-2{
    margin-left:2rem !important;
    margin-right:2rem !important;
}
.mx-3{
    margin-left:3rem !important;
    margin-right:3rem !important;
}
.mx-4{
    margin-left:4rem !important;
    margin-right:4rem !important;
}


/* -----------------------------------------------------------------
   padding
   ----------------------------------------------------------------- */
.pb-0{
  padding-bottom:0rem !important;
}
.pb-1{
  padding-bottom:1rem !important;
}
.pb-2{
  padding-bottom:2rem !important;
}
.pb-3{
  padding-bottom:3rem !important;
}
.pb-4{
  padding-bottom:4rem !important;
}
.pb-5{
  padding-bottom:5rem !important;
}
.pb-6{
  padding-bottom:6rem !important;
}
.pb-25{
  padding-bottom:25rem !important;
}


.pt-0{
  padding-top:0rem !important;
}
.pt-1{
  padding-top:1rem !important;
}
.pt-2{
  padding-top:2rem !important;
}
.pt-3{
  padding-top:3rem !important;
}
.pt-4{
  padding-top:4rem !important;
}
.pt-5{
  padding-top:5rem !important;
}
.pt-6{
  padding-top:6rem !important;
}

.py-0{
  padding-top:0rem !important;
  padding-bottom:0rem !important;
}
.py-1{
  padding-top:1rem !important;
  padding-bottom:1rem !important;
}
.py-2{
  padding-top:2rem !important;
  padding-bottom:2rem !important;
}
.py-3{
  padding-top:3rem !important;
  padding-bottom:3rem !important;
}
.py-4{
  padding-top:4rem !important;
  padding-bottom:4rem !important;
}
.py-5{
  padding-top:5rem !important;
  padding-bottom:5rem !important;
}
.py-6{
  padding-top:6rem !important;
  padding-bottom:6rem !important;
}
.py-10{
  padding-top:10rem !important;
  padding-bottom:10rem !important;
}


.pl-0{
  padding-left:0rem !important;
}
.pl-1{
  padding-left:1rem !important;
}
.pl-2{
  padding-left:2rem !important;
}
.pl-3{
  padding-left:3rem !important;
}
.pl-4{
  padding-left:4rem !important;
}
.pl-5{
  padding-left:5rem !important;
}
.pl-6{
  padding-left:6rem !important;
}


.pr-0{
  padding-right:0rem !important;
}
.pr-1{
  padding-right:1rem !important;
}
.pr-2{
  padding-right:2rem !important;
}
.pr-3{
  padding-right:3rem !important;
}
.pr-4{
  padding-right:4rem !important;
}
.pr-5{
  padding-right:5rem !important;
}
.pr-6{
  padding-right:6rem !important;
}


.px-0{
  padding-left:0rem !important;
  padding-right:0rem !important;
}
.px-1{
  padding-left:1rem !important;
  padding-right:1rem !important;
}
.px-2{
  padding-left:2rem !important;
  padding-right:2rem !important;
}
.px-3{
  padding-left:3rem !important;
  padding-right:3rem !important;
}
.px-4{
  padding-left:4rem !important;
  padding-right:4rem !important;
}



/* -----------------------------------------------------------------
   loader
   ----------------------------------------------------------------- */

#loader{
  display: block;
  position:absolute;
  top:30%;
  left:47%;
  z-index:999999;
}

.sk-chase {
  width: 60px; /* サイズ - 可変 */
  height: 60px; /* サイズ - 可変 */
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #534741; /* ベースの色 - 可変 */
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}


/*============================
nav style
============================*/
#slide-nav{
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  z-index: 990;
}
#slide-nav .box {
    width:250px;
    text-align:center;
}
#slide-nav ul {
  padding: 25% 0;
}
#slide-nav ul li {
  display: block;
  position: relative;
}
#slide-nav ul li a,#slide-nav label {
  display: block;
  padding: 1% 20px 1% 40px;
  text-decoration: none;
  color: #231815;
  font-weight:bold;
  font-size:1.2rem;
  line-height: 3.4rem;
  cursor :pointer;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#slide-nav ul li a:hover {
  color: #f29600;
}

#slide-nav input {
    display: none;
}



.acd-check{
  display: none;
}
.acd-label{
  display: block;
  padding: 1% 20px 1% 40px;
  text-decoration: none;
  color: #231815;
  font-weight:bold;
  font-size:1.2rem;
  line-height: 3.4rem;
  cursor :pointer;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.acd-label:hover{
    color: #f29600;
}
.acd-content{
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  width:100%;
  text-align:center;
  visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
  height: 120px;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}


.slide-menu-button {
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  outline: none;
  border: none;
  font-size: 20px;
  color: #f5f5f5;
  cursor: pointer;
  z-index: 999;
}
.slide-menu-button .menu-icon {
  display: block;
  float: left;
  margin:10px;
  cursor: pointer;
}
.slide-menu-button .menu-icon span {
  display: block;
  margin-bottom: 4px;
  width: 30px;
  height: 4px;
  background: #231815;
}
/*hamburger menu style*/
#nav_toggle {
  display: block;
  margin: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 999;
}
#nav_toggle div {
  position: relative;
}
#nav_toggle span {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background: #231815;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
/*hamburger menu close style*/
#nav_toggle span:nth-child(1) {
  top: 0px;
}
#nav_toggle span:nth-child(2) {
  top: 6px;
}
#nav_toggle span:nth-child(3) {
  top: 12px;
}
/*hamburger menu open style*/
.open #nav_toggle span:nth-child(1) {
  top: 6px;
  background: #231815;
  -webkit-transform: rotate(145deg);
  -moz-transform: rotate(145deg);
  transform: rotate(145deg);
}
.open #nav_toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav_toggle span:nth-child(3) {
  top: 6px;
  background: #231815;
  -webkit-transform: rotate(-145deg);
  -moz-transform: rotate(-145deg);
  transform: rotate(-145deg);
}


/* HEBIC modal
================================================== */

.lock {
    overflow-x:hidden;
}
.modal-content {
    position:relative;
    display:none;
    max-width:60%;
    padding:10px 10px;
    border:2px solid #aaa;
    background:#fff;
}

.modal-frame {
    position:relative;
    display:none;
    width:85%;
    height:calc(100% - 20px);
    padding:0px;
    border:0;
    background:#fff;
    margin:0 5%;
}

#modal-overlay {
    z-index:9990;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);

}
#modal-wrap {
    z-index:9995;
    display:none;
    position:fixed !important;
    margin:0 auto;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto; cursor:pointer;
}

#modal-wrap::after {
    position:absolute;
    top:3%;right:3%;
    content:"×";color:#fff;
    z-index:9999;
    font-size:40px;
    line-height: 40px;

    width: 40px;
    height: 40px;
    border-radius: 10%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    font-weight: bold;

    color: #37414b;
    background:#fff;
}


.modal-down {
    position: absolute;
    margin: auto;
    top: 0;bottom: 0;
    left: 0;right: 0;
    cursor:pointer;
}
.modal-down:hover {
    opacity:0.8;
}



/* -----------------------------------------------------------------
   PCのみ表示するもの
   ----------------------------------------------------------------- */


@media screen and (min-width:641px){
  .visible_pc {
      display: block !important;
  }
  .visible_sp {
      display: none !important;
  }

  .w-80{width: 80%}
  .w-70{width: 70%}
  .w-60{width: 60%}
  .w-50{width: 50%}
  .w-40{width: 40%}
  .w-30{width: 30%}
  .w-20{width: 20%}
  .w-18{width: 18%}
  .w-15{width: 15%}
  .w-10{width: 10%}

}


@media screen and (max-width:720px) {
	.menu {
	    float:left;
	    width:100%;
	    font-size:.8em;
	    margin-right:180px;
	}
	.menu li {
	    float:left;
	    margin-left:1rem;
	}
	.logo{
	    padding-left:1rem;
	}
    .plx {
      display: auto !important;
    }
	#footer .menu {
	    float:left;
	    width:100%;
	}
	#footer .menu li {
	    margin-left:1rem;
	}
	#product li .obi p{
	    font-size:0.8rem;
	    line-height: 1.4rem;
	}

    #product li:nth-child(3) {
        margin-top: 15%; /* 1:1 */
        margin-bottom: 15%;
    }
    #product li:nth-child(2) .obi {
        top: 70%;
    }
    #product li:nth-child(3) .obi {
        top: 70%;
    }

	#product-list li{
	    width:calc(27.0% - .5rem);
	    margin-right:.5rem;
	    margin-bottom:1rem;
	}
	#product-list li:nth-of-type(4n) {
	    margin-right:.5rem;
	}
	#product-list li:nth-of-type(3n) {
	    margin-right:0;
	}

	#product-list .waku h3 {
	    font-size:1.2rem;
	    line-height:1.8rem;
	    letter-spacing: 0;
	    padding-bottom:10px;
	}

	#product-view .waku dt{
	    display: block;
	    width:90%;
	    margin-right:0;
	}
	#product-view .waku dd{
	    display: block;
	    width:100%;
	}
}


/*      [SmartPhone]
-----------------------------------------------*/
@media screen and (max-width: 640px) {

    .visible_pc {
      display: none !important;
    }

    .visible_sp {
      display: block !important;
    }

    .center_pc{
    	text-align:left;
	}

    h2 {
        font-size:1.2rem;
        line-height:1.8rem;
    }

    h3 {
        font-size:1.2rem;
        line-height:1.8rem;
    }

    h4{
        font-size:1.0rem;
    }
    h5{
        font-size:1.0rem;
    }
    main p,.info,#product li .obi p { 
      font-size:1.0rem;
      line-height:2.1rem;
    }

    .comment p{
        line-height:2.9rem;
    }
    #white .comment p{
        line-height:2.0rem;
    }

    #header{
        height:25px;
        padding:15px 0;
    }
    h1.title{
        display: none;
    }

    .site_name{
        height:25px;
        left:0;
        top:0;
    }
    .logo{
        padding-left:0;
    }
    .logo:after{
        width:25px;
        height:25px;
    }


    @-webkit-keyframes bgscroll {
      0% {background-position: 0 0;}
      100% {background-position: 250vw 0;}
     }

     @keyframes bgscroll {
      0% {background-position: 0 0;}
      100% {background-position: 250vw 0;}
     }

    @-webkit-keyframes bgscroll2 {
      0% {background-position: 250vw 0;}
      100% {background-position: 0 0;}
     }

     @keyframes bgscroll2 {
      0% {background-position: 250vw 0;}
      100% {background-position: 0 0;}
     }


	.info li{
	    margin-bottom:.5rem;
	}

    #tokucho li{
        display: block;
        padding:3% 7%;
        margin:0 2rem 20%;
        width:calc(86% - 2px);
    }
    #tokucho li:last-child{
        margin:0 2rem 20%;
    }

    #koe li{
        float:auto;
        width:100%;
    }
    #koe li.com{
        width:100%;
    }

    #koe li.com a{
        position: relative;
        display: block;
        width:auto;
        padding:5% 0;
        padding-right:0%;
        height:100%;
    }

    #koe li.com a:after {
        bottom:0;
        right:0;
        margin:auto;
        position:absolute;
        width:20%;
        height:10%;
    }
    #koe li.com.rr a{
       padding-left:0%;
    }

    #product b{
        font-size:0.7rem;
    }
    #product li{
        display: block;
        margin-right:0;
        width:100%;
    }

    #product li .obi h3 {
        font-size:1.1rem;
        line-height:1.5rem;
    }

    #product li .obi{
        background:#fff;
    }

     #product li .obi p{
        font-size:0.9rem;
        line-height:1.4rem;
    }

	#product-head .product li{
	    display:block;
	    padding:1% 2%;
	    margin-right:0;
	    width:95%;
	}

	#product-list .universal {
	    margin:0 0.5%;
	    padding:10%;
	    border-radius: 30px;
	}
	#product-list .universal .com{
	    width:100%;
	}
	#product-list .universal .img{
	    position:relative;
	    width:100%;
	    margin-bottom:1rem;
	    right:0;
	}

    #product li:nth-child(2):before,#product li:nth-child(3):before {
        content: "";
        display: block;
        padding-bottom: 40%;
    }
    #inquiry li{
        display: block;
        margin-right:0;
        margin-bottom:2rem;
        margin:0 2rem 10%;
        width:100%;
    }
    #inquiry li:last-child{
        margin:0 2rem 20%;
    }
    #inquiry li a{
        width:97%;
        height:auto;
    }

    #inquiry h3 {
	    font-size:1.0rem;
	    line-height:1.4rem;
	    letter-spacing: .2rem;
	    padding-bottom:10px;
	}

    #inquiry .tel {
        line-height:1.0rem;
    }


	#product-list li{
	    width:calc(44.0% - .5rem);
	    margin-right:.5rem;
	    margin-bottom:.5rem;
	}
	#product-list li:nth-of-type(4n) {
	    margin-right:.5rem;
	}
	#product-list li:nth-of-type(3n) {
	    margin-right:.5rem;
	}
	#product-list li:nth-of-type(2n) {
	    margin-right:0;
	}
	#product-list .waku {
		border-radius: 30px;
	}

	#product-list .waku h3 {
	    font-size:1.1rem;
	    line-height:1.6rem;
	    letter-spacing: 0;
	    padding-bottom:10px;
	}

	#product-view .waku {
	    width:90%;
	    border-radius: 30px;
	}

	#product-view .waku .mark{
	    height:35px;
	}
	#product-view .waku .mark img{
	    height:35px;
	    margin-right:.2rem;
	}



    #product-view.recipe .waku{
        display: block;
        margin-right:0;
        width:calc(92.0% - 1rem);
        padding:6% 8%;
    }

    #product-view.recipe dt{
        width:100%;
        margin-right:0;
    }
    #product-view.recipe dd{
        display: block;
        width:100%;height:auto;
    }

    #product-view.recipe dd:before {
        padding-top:0;
    }
    #product-view.recipe .spec{
        position: relative;
        padding:3% 8%;
        margin:5% 0;
        width:74%;
        top: 0;
        left: 0;
        transform: translateY(0) translateX(0);
        -webkit- transform: translateY(0) translateX(0);
    }
    #product-view .rcp li{
        display: block;
        min-width:100%;
        margin-right:0;
        white-space: auto;
    }

    #product-view .bot {
        display: block;
        width:90%;
    }


    #product-view ul.product li{
        position: relative;
        display: inline-block;
        padding:1% 2%;
        margin-right:1%;
        width:45.5%;
    }
    #product-view ul.product li:nth-of-type(3n) {
        margin-right:1%;
    }
    #product-view ul.product li:nth-of-type(2n) {
        margin-right:0%;
    }


    #footer{
        height:auto;
        padding:2%;
    }

    #footer .site_name{
        height:20px;
    }
    #footer .logo{
        width:100%;
        text-align:center;
    }
    #footer .logo:after{
        width:20px;
        height:20px;
    }


    .modal-frame {
        width:90%;
        margin:0 4%;
    }

    .P1{
      left: -70px;
      top: auto;
      bottom: -50px;
      width:200px;
    }
    .P2{
      right: -110px;
      top: 100px;
      width:200px;
    }
    .P3{
      left: -70px;
      top:-180px;
      width:200px;
    }
    .P4{
      right: -70px;
      bottom: 700px;
      width:150px;
    }
    .P5{
      left: -40px;
      top: 0px;
      width:130px;
    }
    .P6{
      right: -20px;
      bottom: -40px;
      width:170px;
    }


    .P7{
      left: -70px;
      top: 600px;
      width:180px;
    }
    .P8{
      right: -70px;
      bottom:520px;
      width:180px;
    }
    .P9{
      left: -100px;
      top: 670px;
      width:200px;
    }
    .P10{
      right: -70px;
      bottom: 650px;
      width:200px;
    }
    .P11{
      left: -100px;
      top: 450px;
      width:200px;
    }
}


#auto-slide01 .home-copy{
  position: absolute;
  pointer-events: none;
  z-index:99;
  width:50%;
  max-width: 450px;
  margin:auto;
  margin-top:40%;
  left:0;right:0;
  top:0;bottom:0;
}

#auto-slide01{
  position:relative;
  z-index: -9999;
  left:0;
  width:100%;height:660px;
}

#auto-slider-fade01 {
position: relative;
width: 100%;height:100%;
overflow:hidden;
}
.slphoto {
position: absolute;
}
.slphoto img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 24s infinite;
-webkit-animation: imgTrans 24s ease-in infinite;
animation: imgTrans 24s infinite;
}
#slide01 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#slide02 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}


/* ------------------------------スライドなし----------------- */
.slphoto img {
width: 100%;
height: auto;
opacity:1;
-moz-animation: imgTrans 24s infinite;
-webkit-animation: imgTrans 24s ease-in infinite;
animation: imgTrans 24s infinite;
}

@-webkit-keyframes imgTrans {
0% { opacity:1; }
}

/* ------------------------------スライド開始時はずす

@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:0.5; }
18% { opacity:1; }
25% { opacity:0.2; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:0.5; }
18% { opacity:1; }
25% { opacity:0.2; }
100% { opacity:0; }
}

/* ------------------------------slide03

#slide03 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:0.5; }
18% { opacity:1; }
25% { opacity:0.2; }
100% { opacity:0; }
}
   ----------------------------------------------------------------- */
@media screen and (min-width: 10001px) {
  #auto-slider-fade01 {
  min-height: 600px;
  }
}