@charset "UTF-8";


/*===============================================
●共通
===============================================*/





/*===============================================
●画面の横幅が641px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 641px) {
    
/* !ヘッダー
---------------------------------------------------------- */    
    .header-top {
        display: none;
    }
    

/* !メイン画像
---------------------------------------------------------- */
    #mainImage {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    #mainImage ul li img {
        width: 100%;
    }
    
    #mainImage img.main-text01 {
        width: 42px;
        position: absolute;
        top: -210px;
        left: 0;
        right: 500px;
        bottom: 0;
        margin: auto;
    }
    
    #mainImage img.main-text02 {
        width: 43px;
        position: absolute;
        top: -210px;
        left: 0;
        right: 600px;
        bottom: 0;
        margin: auto;
    }
    
    
    #mainImage > img.main-img-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9997;
    }
    
    #mainImage img.main01 {
        display: none;
        position: absolute;
        top: -150px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    
    #mainImage img.main02 {
        display: none;
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    
    #mainImage img.main03 {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
    }
    
    #mainImage img.main04 {
        display: none;
        position: absolute;
        top: -210px;
        left: 0;
        right: 500px;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    
    #mainImage img.main05 {
        display: none;
        position: absolute;
        top: -210px;
        left: 0;
        right: 600px;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    
    #mainImage img.main06 {
        display: none;
        position: absolute;
        top: 280px;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 9999;
    }
    
    
        

/* box01 */
    #box01 {
        width:1120px;
        margin: 80px auto 0 auto;
        text-align:center;
    }
    
    #box01 > p {
        margin: 0 auto;
    }
    
    #box01 > p > img {
        width: 76px;
    }
    
    #box01 > div {
        margin: 50px 0 0 0;
    }
    
    #box01 > div > p:nth-of-type(1) {
        float: right;
        width: 560px;
        padding: 110px 0 0 0;
        text-align: center;
    }
    
    #box01 > div > p:nth-of-type(1) > img {
        width: 221px;
    }
    
    #box01 > div > p:nth-of-type(2) {
        float: right;
        width: 560px;
        text-align: left;
    }
    
    #box01 > div > p:nth-of-type(2) > img {
        width: 520px;
    }
    
    
/* box02 */
    #box02 {
        width:1120px;
        margin: 80px auto 0 auto;
        text-align: left;
    }
    
    #box02 > div > p:nth-of-type(1) {
        width: 560px;
        height: 320px;
        padding: 0 0 30px 0;
        text-align: left;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        -webkit-text-orientation: upright;
        text-orientation: upright;
    }
    
    #box02 > div > p:nth-of-type(2) {
        width: 560px;
        text-align: right;
    }
    
/* box03 */
    #box03 {
        width: 100%;
        margin: 100px auto 120px auto;
        text-align: center;
    }
    
    #box03 > p {
        width: 100%;
        margin: 0 auto 80px auto;
    }
    
    #box03 > p > img {
        width: 100%;
    }
    
    #box03 > div {
        width: 100%;
        text-align: center;
    }
    
    #box03 > div > ul {
        display: inline;
    }
    
    #box03 > div > ul > li {
        display: inline-block;
        width: 460px;
        margin: 0 40px 0 0;
    }
    
    #box03 > div > ul > li:nth-of-type(2) {
        margin: 0;
    }
    
    #box03 > div > ul > li > img {
        width: 460px;
    }
    
    #box03 > div > ul > li > p {
        width: 460px;
    }
    
    
    /* 画像マウスオーバー */
    .link-hover:before {
        width: 100%;
        left: 0;
        -webkit-transition: width 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
        -moz-transition: width 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
        -o-transition: width 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
        -ms-transition: width 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
        transition: width 400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
    }
    .link-hover:after {
        background-color: #8a8a8a;
    }
    .link-hover span.wrap:after {
        opacity: 0;
    }
    .link-hover span.wrap span {
        color: #ffffff;
    }
    

}

/*===============================================
●画面の横幅が640px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 640px) {

/* !ヘッダー
---------------------------------------------------------- */    
    .header-top {
        display: none;
    }

/* !メイン画像
---------------------------------------------------------- */
    #mainImage_sp {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    #mainImage_sp img {
        width: 100%;
    }
	
	#mainImage_sp .main01{
		position: absolute;
		left: 2%;
		bottom:6%;
		width: 34%;
		max-width: 220px;
		z-index: 10;
	}
    
    #mainImage .img_list {
        overflow: hidden;
        height: 100%;
    }

    #mainImage .img_list .slick-list {
        height: 100%;
    }

    #mainImage .img_list .slick-track {
        height: 100%;
    }

    #mainImage .img_list .item_wrap {
        overflow: hidden;
        position: relative;
    }
    
    #mainImage .img_list .item_wrap:nth-of-type(1) .item {
		background: url(../../images/index/main_img01_sp.jpg) center center no-repeat;
        background-size: cover;
    }
    
    #mainImage .img_list .item_wrap:nth-of-type(2) .item {
        background: url(../../images/index/main_img02_sp.jpg) center center no-repeat;
        background-size: cover;
    }
    
    #mainImage .img_list .item_wrap:nth-of-type(3) .item {
        background: url(../../images/index/main_img03_sp.jpg) center center no-repeat;
        background-size: cover;
    }
    
    #mainImage .img_list .item_wrap .item {
        height: 100%;
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }

    #mainImage .img_list .slick_scale {
        -webkit-animation: slick_move 8s linear;
        animation: slick_move 8s linear;
    }
     
    
    #mainImage img.main_title {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 178px;
    }



/* box01 */
    #box01 {
        width: 90%;
        margin: 30px auto 0 auto;
        text-align:center;
    }
    
    #box01 > p {
        margin: 0 auto;
    }
    
    #box01 > p > img {
        width: 61px;
    }
    
    #box01 > div {
        margin: 20px 0 0 0;
    }
    
    #box01 > div > p:nth-of-type(1) {
        text-align: center;
    }
    
    #box01 > div > p:nth-of-type(1) > img {
        width: 132px;
    }
    
    #box01 > div > p:nth-of-type(2) {
        margin: 20px auto 0 auto;
    }
    
    #box01 > div > p:nth-of-type(2) > img {
        width: 100%;
    }
    
    
/* box02 */
    #box02 {
        width: 90%;
        margin: 20px auto 0 auto;
        text-align: left;
    }
    
    #box02 > div > p:nth-of-type(1) {
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    
    #box02 > div > p:nth-of-type(2) {
        width: 100%;
        margin: 20px auto 0 auto;
    }
    
    #box02 > div > p:nth-of-type(2) > img {
        width: 100%;
    }
    
/* box03 */
    #box03 {
        width: 100%;
        margin: 45px auto 40px auto;
        text-align: center;
    }
    
    #box03 > p {
        width: 100%;
        margin: 0 auto;
    }
    
    #box03 > p > img {
        width: 100%;
    }
    
    #box03 > div {
        width: 90%;
        margin: 35px auto 0 auto;
    }
    
    #box03 > div > ul {
        width: 100%;
    }
    
    #box03 > div > ul > li {
        width: 100%;
        margin: 0 auto 25px auto;
    }
    
    #box03 > div > ul > li:nth-of-type(2) {
        margin: 0 auto;
    }
    
    #box03 > div > ul > li > a > img {
        width: 100%;
    }
    
    #box03 > div > ul > li > a > p {
        width: 100%;
        padding: 20px 0;
        background-color: #FFF;
    }
    
}