@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap");
@import url("https://use.typekit.net/cse2drq.css");
/* リセットCSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/*font: inherit;*/
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1em; }
ol, ul {
list-style: none; }
p,li{
line-height: 1.5em;
}
.f-din {
font-family: din-2014, sans-serif;
font-weight: 400;
font-style: normal;
}
.f-din a {
color: #FFF!important;
}

.bg_aqua{background-color: #5DB9C8;}
.text_aqua{color: #5DB9C8;}
.border_aqua{border: 1px solid #5DB9C8;}

.bgimg_aqua{
background-position: center;
background-image: url("../images/bg_aqua.png");
background-repeat: repeat;
background-size: cover;
}
.border_white{border: 1px solid #FFF;}
.text_op50{ opacity: 0.5;}
.bg_op50{ background:rgba(50,50,50,0.5);}
.bg_op60{ background:rgba(60,60,60,0.6);}
.bg_orange{background-color: #E58500;}
.text_orange{color: #E58500;}

.bg_dark{background-color: #000;}

.fs100{
font-size:100%;
}
.fs110{
font-size:110%;
}
.fs120{
font-size:120%;
}
.fs130{
font-size:130%;
line-height: 2rem;
}
.fs140{
font-size:140%;
}
.fs150{
font-size:150%;
}
.fs90{
font-size:90%;
}
.fs80{
font-size:80%;
}
.fs70{
font-size:70%;
}
.fs60{
font-size:60%;
}
.fs50{
font-size:50%;
}

@media only screen and (min-width:768px){
.mx-wide{
margin-right: 14rem;
margin-left: 14rem;
}
.mx-7{
margin-right: 7rem;
margin-left: 7rem;
}
}

.mb-7{
margin-bottom: 7rem;
}

header{
position: relative;
width: 100%;
padding: 56.25% 0 0 0;
}
header video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header .textbox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #FFF;
}
header .textbox2{
width: 100%;
position: absolute;
bottom: 3%;
left: 50%;
transform: translate(-50%, -3%);
-webkit-transform: translate(-50%, -3%);
-ms-transform: translate(-50%, -3%);
}
.text-line {
display: flex;
align-items: center;
}
header .logobox{
position: absolute;
top: 1rem;
left: 1rem;
}
@media only screen and (max-width:767px){
header .logobox img{
width: 60%;
}
}
.text-line:before,
.text-line:after {
content: "";
flex-grow: 1;
height: 1px; /* 線の太さ */
background: #FFF; /* 線の色 */
margin:0 1em; /* 文字と線の余白 */
}

.first_main .idea_images div{
padding: 0!important;
}

.first_main .idea_images div{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 150px;
}
@media only screen and (max-width:767px){
.first_main .idea_images div{
height: 80px;
}
}
.first_main .idea_images .ideaimg_1{
background-image: url("../images/ideaimg_1.jpg");
}
.first_main .idea_images .ideaimg_2{
background-image: url("../images/ideaimg_2.jpg");
}
.first_main .idea_images .ideaimg_3{
background-image: url("../images/ideaimg_3.jpg");
}
.first_main .idea_images .ideaimg_4{
background-image: url("../images/ideaimg_4.jpg");
}
.first_main .idea_images .ideaimg_5{
background-image: url("../images/ideaimg_5.jpg");
}
.first_main .idea_images .ideaimg_6{
background-image: url("../images/ideaimg_6.jpg");
}

.first_main .bg_pic{
background-position: center;
background-image: url("../images/img_iceshavings.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.feature .bg_pic{
background-position: center;
background-image:url("../images/bg_fruits_op.jpg");
background-repeat: no-repeat;
background-size: cover;
}

.spec table th,.spec table td{
padding: 0.5rem;
line-height: 1.5em;
}

.record .bg_pic{
background-position: center;
background-image: url("../images/bg_record.jpg");
background-repeat: no-repeat;
background-size: cover;
}

h1 span{
display:block;
letter-spacing: 0.2em;
}
h2{
font-weight: bold;
line-height: 1.5em;
}
h3{
font-size:1.5rem;
font-weight: bold;
margin-bottom: 2rem;
}
h3 span{
font-size:85%;
display: block;
margin-bottom: 1rem;
font-family: Times New Roman;
font-weight: normal;
letter-spacing: 0.1em;
}
.ribbon{
background-position: center;
background-image: url("../images/icon_ribbon.png");
background-repeat: no-repeat;
background-size: contain;
max-width: 350px;
height: 100px;
color: #FFF;
vertical-align: middle;
padding-top: 28px;
}
ul{
list-style-type: none;
}

.fukidashibox {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 1rem;
width: 100%;
background: #FFF;
font-weight: bold;
}

.fukidashibox:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #FFF;
}

.fukidashibox p {
margin: 0;
padding: 0;
}

form input.btn_form{
background: #FFF;
padding: 0.7rem 5rem;
font-weight: bold;
background-color: #FFF;
border: 0;
}
@media only screen and (max-width:767px){
form .col-md-3{
text-align:left!important;
padding-bottom: 0.5rem;
}
}

@media only screen and (min-width:768px){
.about .textbox, .howto .textbox{
width: 22rem;
}
}

.contact .f-din{
font-size: 3rem;
line-height: 1.2em;
}
@media only screen and (max-width:767px){
.contact .f-din{
font-size: 2rem;
}
}

@media only screen and (max-width:767px){
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
}

.feature .colbox{
padding-bottom:5.5rem;
}
@media only screen and (max-width:767px){
.feature .colbox{
padding-bottom:4rem;
}
}
.feature .colbox .btm{
position: absolute;
bottom: 0!important;
width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

	/*レスポンシブ改行*/
@media screen and (min-width: 768px) {
  .br-pc {
    display: block; }

  .br-sp {
    display: none; } }
@media screen and (max-width: 767.98px) {
  .br-pc {
    display: none; }

  .br-sp {
    display: block; } }