/* Generated by less 2.5.1 */
@font-face {
	font-family: 'roboto_condensedbold';
	src: url('../font/robotocondensed-bold.woff2') format('woff2'), url('../font/robotocondensed-bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font: 14px "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	background-color: #F9F3D6;
	background-image: url(../img/background.png);
	background-repeat: repeat-x;
	background-position: top center;
}
ol,
ul,
li,
h1,
h2,
h3,
h4,
th,
em,
a {
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  list-style: none;
}
img {
  border: none;
}

/*-------------------------------------------------------*/
/* header */
/*-------------------------------------------------------*/

#header {
  height: 110px;
  background: #FFF;
  border-bottom: #6BC1FF 5px solid;
}
#header.mon {
  border-bottom-color: #6bc1ff;
}
#header.tue {
  border-bottom-color: #f1546a;
}
#header.wed {
  border-bottom-color: #9ece85;
}
#header.thu {
  border-bottom-color: #f7acdb;
}
#header.fri {
  border-bottom-color: #ffd100;
}
#header_inn {
  position: relative;
  width: 1080px;
  margin: auto;
}

@media screen and (max-width: 1100px) {
	#header_inn {
		width: auto;
	}
}

/*-------------------------------------------------------*/
/* logo_around */
/*-------------------------------------------------------*/

#logo_around h1 {
  position: absolute;
  top: 10px;
  z-index: 1;
}
#logo_around #logo_txt {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: #24517F;
  top: 126px;
  left: 290px;
}
#logo_around #logo_about {
  position: absolute;
  display: block;
  font-size: 14px;
  top: 67px;
  left: 330px;
  height: 34px;
  z-index: 2;
}
#logo_around #logo_about:after {
  content: "";
  position: absolute;
  top: 0px;
  right: -14px;
  display: block;
  height: 0;
  width: 0;
  border-top: 17px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 14px solid #24517F;
}
#logo_around #logo_about a {
  color: #FFF;
  display: block;
  height: 34px;
  line-height: 35px;
  padding-left: 25px;
  background-color: #24517F;
  background-repeat: no-repeat;
  background-position: 5px center;
  background-image: url(../img/icon_arr.png);
  background-size: 8%;
}
#logo_around #logo_about a:after,
#logo_around #logo_about a:before {
  content: "";
  position: absolute;
  left: -12px;
  display: block;
  height: 0;
  width: 0;
}
#logo_around #logo_about a:after {
  border-top: 17px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 17px solid #24517F;
  border-left: 12px solid transparent;
  top: 0;
}
#logo_around #logo_about a:before {
  border-top: 17px solid #24517F;
  border-right: 0px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 12px solid transparent;
  bottom: 0;
}
#logo_around #logo_about a:hover {
  color: #9ac1e8;
}

@media screen and (max-width: 770px) {
	#logo_around h1 {
		left: 10px;
	}
	#logo_around h1 img {
		width: 250px;
	}
	#logo_around #logo_about {
		top: 130px;
		left: auto;
		right: 17px;
	}
	#logo_around #logo_txt {
		font-size: 16px;
		left: 10px;
		top: 123px;
	}
}

@media screen and (max-width: 440px) {
	#logo_around #logo_about {
		top: 150px;
	}
}
/*-------------------------------------------------------*/
/* head_nav */
/*-------------------------------------------------------*/

#head_nav {
  position: absolute;
  top: 70px;
  right: 0;
}
#head_nav li {
  position: relative;
  display: inline-block;
  margin: 0 13px 0 12px;
}
#head_nav li:after {
  content: "";
  position: absolute;
  top: 0px;
  right: -12px;
  display: block;
  height: 0;
  width: 0;
  border-top: 14px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 12px solid #E9DD94;
}
#head_nav li a {
  color: #245180;
  display: block;
  height: 28px;
  line-height: 28px;
  background: #E9DD94;
  padding-left: 20px;
  white-space: nowrap;
  font-size: 14px;
  background-repeat: no-repeat;
  background-position: 3px center;
  background-image: url(../img/icon_arr_con.png);
  background-size: 13px 10px;
}
#head_nav li a:after,
#head_nav li a:before {
  content: "";
  position: absolute;
  left: -12px;
  display: block;
  height: 0;
  width: 0;
}
#head_nav li a:after {
  border-top: 14px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 14px solid #E9DD94;
  border-left: 12px solid transparent;
  top: 0;
}
#head_nav li a:before {
  border-top: 14px solid #E9DD94;
  border-right: 0px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 12px solid transparent;
  bottom: 0;
}
#head_nav li a:hover {
  color: #FFF;
}

@media screen and (max-width: 570px) {
	#head_nav {
		display: none;
	}
}
/*-------------------------------------------------------*/
/* main */
/*-------------------------------------------------------*/

main {
	display: flex;
	position: relative;
	width: 1080px;
	margin: auto;
	padding-top: 70px;
}

main article {
	display: block;
	width: 790px;
	margin-right: 20px;
}

main section {
	display: block;
}

@media screen and (max-width: 1100px) {
	main {
		display: block;
		width: auto;
	}
	
	main article {
		width: auto;
		margin-right: 0;
	}
}

@media screen and (max-width: 440px) {
	main {
		padding: 80px 10px 0;
	}
}
/*-------------------------------------------------------*/
/* sec_top */
/*-------------------------------------------------------*/

#sec_top {
  display: block;
  text-align: right;
  position: relative;
  height: 34px;
  margin-bottom: 30px;
}
#sec_top a {
  display: block;
  height: 34px;
  position: absolute;
  top: 0;
  right: 15px;
}
#sec_top a:after {
  content: "";
  position: absolute;
  top: 0px;
  right: -14px;
  display: block;
  height: 0;
  width: 0;
  border-top: 17px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 14px solid #24517F;
}
#sec_top a span {
  color: #FFF;
  display: block;
  height: 34px;
  line-height: 35px;
  background: #24517F;
  padding-left: 25px;
  background-repeat: no-repeat;
  background-position: 6px center;
  background-image: url(../img/icon_arr.png);
  background-size: 13px 10px;
}
#sec_top a span:after,
#sec_top a span:before {
  content: "";
  position: absolute;
  left: -12px;
  display: block;
  height: 0;
  width: 0;
}
#sec_top a span:after {
  border-top: 17px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 17px solid #24517F;
  border-left: 12px solid transparent;
  top: 0;
}
#sec_top a span:before {
  border-top: 17px solid #24517F;
  border-right: 0px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 12px solid transparent;
  bottom: 0;
}
#sec_top a span:hover {
  color: #9ac1e8;
}

/*-------------------------------------------------------*/
/* aside */
/*-------------------------------------------------------*/

main aside {
	background-color: #F9F3D6;
	background-color: rgba(249, 243, 214, 0.8);
	width: 270px;
	border-radius: 8px 8px 0 0;
	background-image: url(../img/base_bg.png);
	background-repeat: repeat-x;
	padding: 40px 0 0 0;
}

main aside section {
  margin-bottom: 15px;
}
main aside .present h1 img {
  height: 43px;
}
main aside .present a img {
  width: 100%;
}
main aside .present a:hover {
  opacity: 0.8;
}
main aside #instagram h1 img {
  height: 30.5px;
}
main aside #twitter h1 img {
  height: 24px;
}
main aside .banner a img {
  width: 100%;
}
main aside .banner a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1100px) {
	main aside {
		display: flex;
		flex-wrap: wrap;
		padding: 40px 0 0 5px;
		position: relative;
		width: auto;
		border-radius: 0;
		margin-top: 280px;
	}
	
	main aside .banner,
	main aside .present {
		width: calc(25% - 5px);
		margin-right: 5px;
		margin-bottom: 8px;
	}
	
	main aside #instagram {
		position: absolute;
		top: -280px;
		left: 50%;
		margin-left: 10px;
		width: 320px;
	}
	
	main aside #twitter {
		position: absolute;
		top: -280px;
		left: 50%;
		margin-left: -330px;
		width: 320px;
	}
}

@media screen and (max-width: 770px) {
	main aside {
		padding: 40px 10px 10px 10px;
		background-color: rgba(255, 255, 255, 0.3);
		height: auto;
		margin-top: 0;
	}
	
	main aside .banner,
	main aside .present {
		width: 100%;
	}
	
	main aside .present h1 img {
		width: auto;
		height: 43px;
	}
	
	main aside #twitter,
	main aside #instagram {
		position: static;
		width: 100%;
		margin: 0;
	}
}
/*-------------------------------------------------------*/
/* getsukin_nav */
/*-------------------------------------------------------*/

#getsukin_nav {
  text-align: center;
  background: #F6E3BA;
  padding: 30px 0;
}
#getsukin_nav ul {
  display: inline;
}
#getsukin_nav ul li {
  display: inline;
}
#getsukin_nav ul li a {
  display: inline-block;
  background-color: #DDA244;
  color: #FFF;
  height: 30px;
  line-height: 32px;
  padding: 0 15px 0 30px;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-position: 10px center;
  background-image: url(../img/icon_arr.png);
  background-size: 13px 10px;
  margin: 0 5px;
}
#getsukin_nav ul li a:hover {
  opacity: 0.8;
}

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/*
#footer {
  background: #FFF;
  padding: 40px 0 30px 0;
}
#footer_common {
  position: relative;
  width: 1080px;
  margin: auto;
}
#footerlist {
  display: block;
  font-size: 11px;
  line-height: 1.1em;
}
#footerlist li {
  display: inline;
}
#footerlist li a:hover {
  text-decoration: underline;
}
#footercredit {
  display: block;
  line-height: 1.1em;
  padding: 7px 0 0 0;
}
#footercredit #produceby {
  margin: 0 11px 0 0;
}
#footercredit #copyright {
  margin: 0 0 3px 0;
}
#footer-logobox a img {
  position: absolute;
  right: 0;
  top: 0;
}
#footer-logobox a:hover img {
  opacity: 0.8;
}
@media screen and (max-width: 1100px) {
  #footer_common,
  main,
  #header_inn {
    width: 750px;
  }
  main article {
    margin: 0;
    float: none;
  }
  main aside {
    padding: 40px 0 0 0;
    position: relative;
    float: none;
    width: auto;
    height: 350px;
    border-radius: 0;
  }
  main aside section {
    width: 270px;
    margin-bottom: 5px;
  }
  main aside #present {
    width: 190px;
  }
  main aside #present h1 img {
    width: 95%;
    height: auto;
  }
  main aside #instagram {
    position: absolute;
    top: 43px;
    right: 280px;
  }
  main aside #twitter {
    position: absolute;
    top: 43px;
    right: 0;
  }
  main aside #banner {
    width: 190px;
  }
}
@media screen and (max-width: 770px) {
  #footer_common,
  main,
  #header_inn {
    width: auto;
  }
  #head_nav {
    display: none;
  }
  #header {
    height: 88px;
  }
  #logo_around h1 {
    left: 10px;
  }
  #logo_around h1 img {
    width: 250px;
  }
  #logo_around #logo_about {
    top: 151px;
    left: auto;
    right: 17px;
  }
  #logo_around #logo_txt {
    font-size: 16px;
    left: 10px;
    top: 123px;
  }
  main {
    padding-top: 100px;
  }
  main aside {
    padding: 40px 10px 10px 10px;
    background-color: rgba(255, 255, 255, 0.3);
    height: auto;
  }
  main aside section {
    width: 270px;
    margin-bottom: 5px;
  }
  main aside #present {
    width: auto;
  }
  main aside #present h1 img {
    width: auto;
    height: 43px;
  }
  main aside #instagram {
    position: static;
    width: auto;
  }
  main aside #twitter {
    position: static;
    width: auto;
  }
  main aside #banner {
    width: auto;
  }
  #getsukin_nav {
    padding: 0;
  }
  #getsukin_nav ul {
    display: block;
  }
  #getsukin_nav ul li {
    display: block;
    margin-bottom: 1px;
  }
  #getsukin_nav ul li a {
    display: block;
    border-radius: 0;
    text-align: left;
    margin: 0;
    background-position: 5px center;
    padding: 0 15px 0 25px;
  }
  #footer {
    padding: 0 0 30px 0;
  }
  #footerlist li {
    display: block;
  }
  #footerlist li span {
    display: none;
  }
  #footer_common #footer-logobox {
    width: auto;
    border-top: none;
    margin: 0;
    padding: 0;
  }
  #footer_common #footer-logobox p a {
    display: block;
    background-image: url(../img/ft_logo.png);
    background-size: 84px 29px;
    width: 84px;
    height: 29px;
    background-repeat: no-repeat;
    margin: 40px auto;
  }
  #footer_common #footer-logobox p a img {
    display: none;
  }
  #footer_common #footer-logobox p:after {
    display: block;
    content: "Copyright © K-Opticom Corporation. All Rights Reserved.";
    font: 7px Arial, Helvetica, sans-serif;
    text-align: center;
  }
  #footer_common #footer-mainbox #footerlist li a,
  #footer_common #footer-mainbox #footerlist li {
    display: block;
  }
  #footer_common #footer-mainbox #footerlist li a {
    font-size: 12px;
    padding: 15px;
    border-top: solid 1px #FFF;
    background-color: #efefef;
    border-bottom: solid 1px #ddd;
    background-image: url(../img/icon_chevron.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 15px 11px;
  }
  #footer_common #footer-mainbox #footercredit {
    display: none;
  }
  #footer_mob {
    display: block;
    padding: 15px 0;
  }
  #footer_mob p {
    text-align: center;
  }
  #footer_mob img {
    zoom: .5;
    -moz-transform: scale(0.5, 0.5);
    margin: 40px auto;
  }
  #footer_mob_copy {
    font: 7px Arial, Helvetica, sans-serif;
  }
}
.ie8 #sec_archive a span,
.ie8 #getsukin_nav ul li a,
.ie8 #sec_top a span,
.ie8 #head_nav li a,
.ie8 #logo_around #logo_about a {
  background-image: none;
}

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

.layout_l_kaijo{
float:left;
}
 
.layout_r_kaijo{
float:right;
}
 
@media screen and (max-width: 999px) {
.layout_l_kaijo{
float:none;
width:100%!important;
}
 
.layout_r_kaijo{
float:none;
width:100%!important;
}
}

#sec_about a:hover img{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: “alpha( opacity=70 )”;
}