@charset "UTF-8";

/*---------------------------------
RESET CSS
---------------------------------*/
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,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{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}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*---------------------------------
COMMON
---------------------------------*/
html {
    font-size: 62.5%;
}
body {
	color: #222222;
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 1.6em;	
	line-height: 1.6;
}
#container {
	width: 980px;
	margin: 186px auto 0;
}

/*Safari*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root #container  {
        margin: 140px auto 0; 
    }
}

a {
	color: #222222;
}
a:hover {
	color: #999999;
}
a img:hover {
	opacity: 0.6;
}
h2 {
	margin-top: 0.4em;
	margin-bottom: 0.3em;
    color: #000000;
    font-family: 'Lato',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 2.0em;
    font-weight: lighter;
	text-align: center;
    text-decoration: none;
    clear: both;
}
/*h2 span {
	display: block;
	font-size: 13px;
    font-weight: bold;
	text-decoration: none !important;
}*/
h3 {
	margin-bottom: 0;
    padding-left: 20px;
    border-bottom: 1px solid #e76886;
    color:#000000;
    font-family: 'Lato',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 1.4em;
    font-weight: 300;
	text-decoration: none;
}
h4 {
    margin-bottom: 0.4em;
    padding-left: 20px;
    color:#000000;
    font-family: 'Lato',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 1.2em;
}
p {
	margin: 0;
    line-height: 1.8;
}
img {
	vertical-align: bottom;
}
strong {
    font-size: 1.6em;
	font-weight: bold;
	color: #000000;
}
ul,dl {
	margin: 0 0 1em 0;
}
ul li {
	list-style: disc;
}
li {
	list-style:decimal;
}

/*---------------------------------
 GENERIC
---------------------------------*/
.name {
	font-size:13px;
}
.cyu {
    margin-top: 16px; 
    color: #888888;
    font-size: .9em;
    line-height: 1.6;   
}
.cyu1 {
    margin-left: 20px;
    color: #888888;
    font-size: .9em;
}
.rmark {
    font-size: .6em;
}
.icon {
	width:30px !important;
    margin-top: 0.5em;
}
.icon2 {
	width:20px !important;
    margin-bottom: 0.5em;
    margin-right: 0.4em;
}
.kakomi {
	padding: 2px 8px;
	margin: 0 5px 0 0;
	background-color: #e76886;
	border: 1px solid #e76886;
	border-radius: 2px;
	font-family: inherit;
	font-size: 0.85em;
}
/*Safari*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .kakomi {
        padding: 5px 7px 4px;  
    }
}

/*---------------------------------
 CONTENTS
---------------------------------*/
/*== TITLE ==*/
.titlearea {
    margin: 3em 0 2em;
    text-align: center;
}
/*Safari*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root .titlearea {
        padding: 2.5em  0 .5em;  
    }
}
.titlearea ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.titlearea li {
    margin:20px 20px 10px;
    list-style: none;
    text-align: center;
    font-size: .8em;
}
/*== MOKUJI ==*/
.mokuji {
    margin: 2em 0 0;
    border-top: 2px dotted #222222;
    border-bottom: 2px dotted #222222; 
}
.mokuji ul {
    display: flex;
    flex-wrap: wrap;
    padding: 1em 0 0 1.8em;
}
.mokuji li {
    width: 190px;
    padding:1.6em 1em;
    list-style: none;
    font-size: 1em;
}
/*== MOVIE ==*/
.moviearea ul {
    display: flex;
    flex-wrap: wrap;
}
.moviearea li {
    list-style: none;
    margin: 0 30px 70px;
}
.moviearea img {
    display: inline-block;
    width: 260px;
    margin-bottom:16px;
    border: 1px solid #e76886;
}
/*== PROCESSMOVIE ==*/
.processmovie{
    margin-bottom: 3em;
    text-align: center;
}
.processmovie p {
    margin-top: 32px;
    font-size: 1.2em;
}
video {
    border: 1px solid #cccccc; 
}
/*== ATTENTIONAREA ==*/
.attentionarea {
    text-align: center;
    font-size: .9em;
}
.attentionarea p {
    font-size: .9em;
}

/*== REFERENCEAREA ==*/
.referencearea {
    margin: 20px 10%;
    padding: 10px;
    text-align: center;
    font-size: .9em;
    border:4px solid #7babf3;
}
.referencearea p{
    font-family: 'Lato',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
.telephone a {
    color: #144997;
    font-size: 1.8em;
}

/*---------------------------------
 PRODUCTS
---------------------------------*/
/*== PRODUCTS ==*/
#productsarea section{
    margin-bottom: 4em;
}
.products-describe {
    overflow: hidden;
    margin: 20px;
}
.products--text {
    width: 70%;
    float: right;
}
#productsarea img {
    display: inline-block;
}
#productsarea ul{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 20px
}
#productsarea li {
    list-style: none;
    text-align: center;
    margin-left: 2%;
}

/*---------------------------------
 HEADER
---------------------------------*/
header {
	position:fixed;
	top: 0;
	width: 100%;
	background: #e55073;
	opacity: 0.80;
	z-index: 100;
}
header h1 {
	padding: 0 0 98px;
}
header .inner {
	position: relative;
	width: 980px;
	margin: 0 auto;
}
/* グローバルナビゲーション */
header nav {
	position: absolute;
	top: 8px;
	right: 314px;
    font-family: 'Heebo',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 1.1em;
    font-weight: lighter;
    text-align: center;
	overflow: hidden;
}
header nav img {
    display: inline-block;
    text-align: center;
}
header nav ul {
	margin: 20px 0 0;
}
header nav li {
    height: 32px;
    margin: 0;
	padding: 0 28px;
	list-style: none;
    float: left;
}
header nav a.btn-border {
    padding: 1px 26px 0;
    border: 2px solid #ffffff;
    border-radius: 100vh;
    background: #ffffff;
    color: #e55073;
    text-decoration: none;
}
/*Safari*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    _::-webkit-full-page-media, _:future, :root header nav a.btn-border {
        padding: 5px 26px 4px;  
    }
}
header nav a.btn-border:hover {
    width: 120px;
    color: #ffffff;
    background: #e55073;
    border: 2px solid #ffffff;
    border-radius: 100vh;
}

/*---------------------------------
 FOOTER
---------------------------------*/
footer {
	padding: 2em 0;
	font-size: 0.75em;
	text-align: center;
	clear: both;
}

.footer_link {
    margin-bottom:1em;
    font-size: 1.4em;
    color:#e55073;
}

.footer_link a{
    color:#e55073;
}
.footer_link a:hover{
    color:#ff9bb1;
}

/*---------------------------------
 PAGE TOP
---------------------------------*/
.totop {
	position: fixed;
	bottom: 15px;
	right: 17px;
}
.totop a {
	display: block;
	text-decoration: none;
}

/*---------------------------------
 TABLET スクロールバー考慮20px大きい
---------------------------------*/
@media screen and (max-width:979px) {
	header {
    position: absolute;
    }
    header h1 {
        width: 60%;
        margin-left: 10px;
        padding: 0 0 98x;
	}
    header .inner {
	   position: relative;
	   width: 100%;
	   margin: 0 auto;
    }
    header nav {
		position : absolute;
        top: 8px;
        right: 25%;
	}
    .moviearea ul {
        display: flex;
        flex-wrap: wrap;
    }
    .moviearea li {
        width: 27%;
        margin: 0 3% 70px;
        font-size: .8em;
        list-style: none;
    }
    .moviearea img {
        display: inline-block;
        border: 1px solid #e76886;
        width: 100%;
        margin-bottom:16px;   
    }
    .mokuji li {
        width: 300px;
        padding:1em 1em;
        list-style: none;
        font-size: 1.0em;
    }
    .titlearea ul{
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        -webkit-justify-content: center;
        justify-content: center;
    }
    video {
        width: 70%;
        height: auto;
    }
    .attentionarea {
        font-size: .9em;
        text-align: left;
    }
    .products--text {
        width: 60%;
        float: right;
    }
    #container {
		box-sizing: border-box;
		width: 100%;
		padding: 0 10px;
	}
}

/*---------------------------------
 SP
---------------------------------*/
@media screen and (max-width:767px) {
    header h1 {
        width: 90px;
        margin-left: 2px;
        padding: 0 0 98px;
	}
    header .inner {
	    position: relative;
	    width: 100%;
	    margin: 0 auto;
    }
    header nav {
		position : absolute;
        top: 28px;
        left: 0;
        right: 0;
    }
    header nav img{
        width: 280px;
    }
    header nav ul {
        display: inline-block;
        margin: 18px 0 0;
    }
    header nav li {
        padding: 0 10px;
        font-size: .9em;
    }
    .moviearea ul {
        display: flex;
        flex-wrap: wrap;
    }
    .moviearea li {
        width: 40%;
        margin: 0 5% 70px;
        font-size: .8em;
        list-style: none;
    }
    .moviearea img {
        display: inline-block;
        border: 1px solid #e76886;
        width: 100%;
        margin-bottom:16px;
    }
	h2 {
		margin-top: 30px;
        font-size: 1.8em;
	}
    .products-describe {
        overflow: hidden;
        margin: 20px 0;
        text-align: center;
    }
    .products-describe img {
        width: 50%;
    }  
    .products--text {
        width: 100%;
        margin-top: 16px;
        text-align: left;
    }
    .processmovie {
        text-align: left;
    }
    video {
        width: 96%;
        height: auto;
    }
    .attentionarea {
        margin-bottom: 32px;
        font-size: .9em;
        text-align: left;
    }
    .referencearea {
    margin: 20px 5%;
    }
   .titlearea {
        text-align: left;
    }
    footer {
        padding-left: 1em;
        text-align: left;
        font-size: 0.6em;
    }
    .footer_link {
        font-size: 1.6em;
    }
}

/*---------------------------------
 TEL
---------------------------------*/
@media screen and  (min-width: 767px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}