@charset "utf-8";
img{
	max-width: 100%;
	height: auto;
}


nav{
    margin-bottom: 2em;
}

h2{
    font-size: 32px;
    line-height: 130%;
    margin-bottom: 1.5em;
}

h3{
    font-size: 20px;
}


/*------トップスライド------*/
#mv {
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-image: url(../img/topmainimg/0.jpg);
    background-size: cover;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-top: 4em;
    padding-bottom: 5em;
}
#mainimg-nami {
    background-image: url("../img/topmainimg/nami.png");
    background-position: center bottom;
    position: absolute;
    width: 100%;
    background-repeat: repeat-x;
    bottom: 0px;
    top: -10px;
}

.ribbon {
    position: absolute;
    transform: rotateZ(30deg);
    right: -206px;
    top: 40px;
    z-index: 10;
}

.ribbon span {
    text-align: center;
    display: block;
    width: 100%;
    line-height: 1.2em;
    background: #0284d8;
    color: #FFF;
    font-size: 2vw;
    font-weight: 600;
    padding-top: 1.8vw;
    padding-bottom: 1.5vw;
    padding-left: 200px;
    padding-right: 200px;
    letter-spacing: 0.1em;
}
#mv .flex{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
	max-width: 1100px;
}
#mv_left{
    width: 50%;
}
#mv_left h3 img{
    width: 100%;
    padding-top: 2em;
    height: auto;
}

#mv ul{
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5em;
    margin-bottom: 4em;
	justify-content: space-between;
}
#mv ul li{
    width: 49%;
    background-color: #FFFFFF;
    border-radius: 5px;
    text-align: center;
    color: #269bce;
    font-size: 1.1vw;
    font-weight: 900;
    padding-top: 0.8vw;
    padding-bottom: 0.6vw;
    margin-bottom: 10px;
    list-style-type: none;
    margin-left: 0px;
}
#mv .mv_logo{
    text-align: center;
}
#mv .mv_logo img{
    width: 70%;
}

#mv_right {
    width: 45%;
}

#mv_right img {
    width: 100%;
}

#productimage1l {
  top: 147px;
  left: calc(50vw - 485px);
}

/*------01------*/
#top_b01{
    background-image: url(../img/top/01_back.jpg);
    background-repeat: no-repeat;
    padding-top: 3em;
    padding-bottom: 8em;
}
#top_b01 .flex div:nth-child(1){
    width: 40%;
}

#top_b01 .flex div:nth-child(2){
    width: 50%;
}

#top_b01 .flex div:nth-child(2) p{
    font-size: 155%;
    font-weight: 800;
    line-height: 2em;
    margin-bottom: 2em;
    margin-top: 2em;
}
#top_b01 .flex div:nth-child(2) p span{
    color: #0284d8;
}


#top_b01 .flex div:nth-child(2) a{
    background-image: url(../img/top/bot.jpg);
    background-size: cover;
    color: #FFFFFF;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    width: 80%;
    text-align: center;
    text-decoration: none;
    font-size: 130%;
    font-weight: 400;
  position: relative;
  display: inline-block;
	transition: 0.3s;
}
#top_b01 .flex div:nth-child(2) a:hover{
	opacity: 0.7;
}

#top_b01 .flex div:nth-child(2) a::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  margin: auto;
}


/*------02------*/

#top_b02{
    background-color: #daf0fe;
    padding-top: 6em;
    padding-bottom: 6em;
}


#top_b02 .flex div{
    width: 48%;
    margin-bottom: 2em;
}

#top_b02 .flex div img{
    margin-bottom: 0.2em;
	transition: 0.3s;
	width: 100%;
}
#top_b02 .flex div img:hover{
	opacity: 0.6;
}
#top_b02 .flex div h4{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.2em;
    color: #24385d;
}
#top_b02 .flex div h4:before {
    display: none;
}
@media screen and (min-width: 897px) {
	
#top_b02 .flex div:nth-child(3) p,#top_b02 .flex div:nth-child(4) p{
    margin-bottom: 1em;
    height: 4em;
}
}


#top_b02 .flex div p{
    margin-bottom: 1em;
    height: 5.5em;
}
#top_b02 .flex .link{
    width: 100%;
}
#top_b02 .flex .link a{
    background-image: url(../img/top/bot.jpg);
    background-size: cover;
    color: #FFFFFF;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 110%;
    font-weight: 400;
    position: relative;
    display: inline-block;
    transition: 0.3s;
}
#top_b02 .flex .link a:hover{
	opacity: 0.7;
}

#top_b02 .flex .link a::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  margin: auto;
}

/*------03------*/

#top_b03{
    padding-top: 8em;
	padding-bottom: 6em;
}

#top_b03 .link{
    text-align: center;
}

#top_b03 .link a{
    background-image: url(../img/top/bot.jpg);
    background-size: cover;
    color: #FFFFFF;
    padding-top: 1em;
    padding-bottom: 1em;
    width: 31%;
    text-align: center;
    text-decoration: none;
    font-size: 110%;
    font-weight: 400;
    position: relative;
    display: inline-block;
    transition: 0.3s;
}
#top_b03 .link a:hover{
	opacity: 0.7;
}

#top_b03 .link a::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 0;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  margin: auto;
}

/*------linkbot------*/

#top_linkbot{
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: #d2d2d2;
}

#top_linkbot .flex{
	justify-content: space-around;
}
#top_linkbot .flex div{
    width: 45%;
    background-color: #FFFFFF;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}
#top_linkbot .flex div:hover{
	opacity: 0.5;
}

#top_linkbot .flex div a{
    text-decoration: none;
    font-size: 150%;
    font-weight: 700;
    color: #263B61;
    display: block;
    width: 100%;
}
#top_linkbot .flex div i{
    color: #263B61;
    margin-right: 0.5em;
    font-size: 1.2em;
}


@media screen and (max-width: 896px) {

h2{
    font-size: 28px;
    font-weight: 800;
}	

/*------トップスライド------*/

#mv {
    padding-bottom: 3.5em;
}
#mainimg-nami {
    top: auto;
}


.ribbon {
    transform: rotateZ(0deg);
    right: 0;
	left: 0;
    top: auto;
    bottom: 0;
}

.ribbon span {
    width: 100%;
    line-height: 1.2em;
    font-size: 16px;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
}

#mv .flex{
    width: 90%;
}
#mv_left{
    width: 100%;
}
#mv_left h3 img{
    padding-top: 1em;
}

#mv ul{
    margin-top: 0.8em;
    margin-bottom: 1em;
    margin-left: 0px;
}
#mv ul li{
    font-size: 13px;
}
#mv .mv_logo{
    text-align: center;
}
#mv .mv_logo img{
    width: 70%;
}

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

#mv_right img {
    width: 80%;
}

#productimage1l {
  top: 147px;
  left: calc(50vw - 485px);
}	


/*------01------*/
#top_b01{
    padding-top: 2em;
    padding-bottom: 3em;
}
#top_b01 .flex div:nth-child(1){
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}

#top_b01 .flex div:nth-child(2){
    width: 100%;
}

#top_b01 .flex div:nth-child(2) p{
    font-size: 110%;
    font-weight: 800;
    line-height: 2em;
    margin-bottom: 2em;
    margin-top: 2em;
    text-align: justify;
}

#top_b01 .flex div:nth-child(2) a{
    width: 100%;
}
/*------02------*/

#top_b02{
    padding-top: 3em;
    padding-bottom: 0em;
}

#top_b02 .flex div{
    width: 100%;
    margin-bottom: 2em;
}

#top_b02 .flex div img{
    margin-bottom: 0.2em;
	transition: 0.3s;
}
#top_b02 .flex div img:hover{
	opacity: 0.6;
}
#top_b02 .flex div h4{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0.2em;
    color: #24385d;
}
#top_b02 .flex div p{
    height: auto;
}
#top_b02 .flex .link{
    width: 100%;
}

/*------03------*/

#top_b03{
    padding-top: 3em;
	padding-bottom: 3em;
}

#top_b03 .link a{
    width: 100%;
}

/*------linkbot------*/

#top_linkbot{
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

#top_linkbot .flex div{
    width: 100%;
    margin-bottom: 1em;
}
#top_linkbot .flex div a {
    font-size: 110%;
}
	
}


/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height: 220px;
  object-fit: cover;
}
.slider ul{
    margin-bottom: 3em;	
}
.slider li{
    text-align: center;
}
.slider li a{
    text-decoration: none;
    color: #262626;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 4px solid #666;/*矢印の色*/
    border-right: 4px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}