@charset "UTF-8";
@media screen and (min-width: 761px) {
	main {
        margin-top: 80px;
		line-height: 2;
    }
	a:hover {
		transition : 0.5s;
	}
	.top_h2 {
		font-size: 28px;
        margin: 0 auto 40px;
        font-weight: bold;
        text-align: center;
	}
	.main_visual {
		/*background-image: url(../images/top_rn/main_visual_rn.png);
		background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 33vw;*/
        width: 100%;
        margin: 0;
	}
	.main_visual a img{
		width:100%;
		height:auto;
	}
	.main_visual_inner {
		width: 35%;
        margin: auto;
        position: relative;
        top: 17%;
        left: 1.3%;
		color: #fff;
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	}
	.block_left {
		text-align: right;
		font-size: 18px;
		text-shadow: #ccb4b1 1px 0 10px;
	}
	.main_visual_inner h1 {
		font-size: 60px;
		text-shadow: #ccb4b1 1px 0 10px;
	}
	.visual_sub_text {
		display: flex;
	}
	.visual_sub_text .visual_tate_text {
		-ms-writing-mode: tb-rl;
  		writing-mode: vertical-rl;
		font-size: 16px;
	}
	.visual_color_number {
		font-size: 50px;
		background: linear-gradient(180deg, #fcf6da 0%, #f9ecac 40%, #f8e99d 80%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.main_visual_link {
		display: block;
        width: 100%;
        text-align: center;
        color: #000;
        border: 1px solid #000;
        padding: 0.5vw 1vw;
        font-size: 1.6vw;
        border-radius: 30px;
        background-color: rgba(255, 255, 255, .4);
        position: relative;
        font-style: italic;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        top: 1vw;
	}
	.main_visual_link:hover {
		background-color: rgba(255,255,255,1.0);
		transition : 0.5s;
		color: #000;
	}
	.main_visual_link:after {
		content: "";
        width: 1vw;
        height: 1.8vw;
        background-image: url(../images/top_rn/arrow_bk.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 32%;	
	}
	.visual_icon {
		position: absolute;
		top: -3vw;
        right: -11vw;
        width: 10vw;
	}
	.top_banner_rn {
		width: 1100px;
		margin: 40px auto;
		display: flex;
		flex-wrap: wrap;
		line-height: 1.4;
	}
	.top_banner_rn a {
		width: 48%;
        margin-right: 4%;
        margin-bottom: 4%;
		display: block;
	}
	.top_banner_rn a p {
		text-align: center;
	}
	.top_banner_rn a:nth-of-type(2n) {
		margin-right: 0;
	}
	.top_link_rn {
		width: 1100px;
		margin: 40px auto;
		display: flex;
		flex-wrap: wrap;
	}
	.top_link_rn a {
		width: 48%;
        margin-right: 4%;
        margin-bottom: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #2e2e2e;
		color: #fff;
		padding: 18px 0;
		text-align: center;
		font-size: 18px;
		border-radius: 5px;
		position: relative;
	}
	.top_link_rn a:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;	
	}
	.top_link_rn a:hover {
		background: #83c2ca;
	}
	.top_link_rn a img {
		height: 35px;
		margin-right: 15px;
	}
	.top_link_rn a:nth-of-type(2) img {
		height: 28px;
	}
	.top_link_rn a:nth-of-type(3) img {
		height: 28px;
	}
	.top_link_rn a:nth-of-type(2n) {
		margin-right: 0;
	}

	.top_link_rn00 {
		max-width: 1100px;
		margin: 40px auto;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.top_link_rn00 a {
		width: 30%;
		margin-right: 1%;
		margin-left: 1%;
		margin-bottom: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #2e2e2e;
		color: #fff;
		padding: 18px 0;
		text-align: center;
		font-size: 18px;
		border-radius: 5px;
		position: relative;
	}	
	
	.top_link_rn00 a:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;	
	}
	.top_link_rn00 a:hover {
		background: #83c2ca;
	}
	
	.top_link_rn00 a img {
		height: 35px;
		margin-right: 15px;
	}
	
	.reason_rn {
		width: 1100px;
		margin: auto;
		font-size: 18px;
		line-height: 2;
	}
	.reason_rn_box {
		width: 1100px;
		margin: auto;
		display: flex;
	}
	.reason_rn_box figure {
		width: 48%;
		margin-right: 4%;
	}
	.reason_rn_box p {
		width: 48%;
	}
	.reason_p {
		margin: 40px 0 ;
	}
	.link_btn_middle {
		width: 486px;
        background: #2e2e2e;
        text-align: center;
        color: #fff;
        padding: 18px 0;
        font-size: 20px;
        position: relative;
        display: block;
        margin: 30px auto;
        border-radius: 5px;
	}
	.link_btn_middle:hover {
		color: #fff;
		background: #83c2ca;
	}
	.link_btn_middle:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;
	}
	.menu_rn {
		width: 100%;
		padding: 70px 0;
		background: #f2f2ef;
		margin: 70px 0;
	}
	.menu_rn .menu_rn_inner {
		width: 1100px;
		margin: auto;
	}
	.menu_rn .menu_list {
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.menu_rn .menu_list a {
		display: block;
		text-align: center;
		background: #2e2e2e;
		border-radius: 5px;
		color: #fff;
        padding: 18px 0;
        font-size: 20px;
		position: relative;
		margin-right: 2.6%;
		width: 23%;
		
	}
	.menu_rn .menu_list a:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;	
	}
	.menu_rn .menu_list a:last-child {
		margin-right: 0;
	}
	.menu_rn .menu_list a:hover {
		background: #83c2ca;
	}
	.menu_box_inner {
		width: 1100px;
		margin: 70px auto;
	}
	.menu_box_inner .menu_box_h3 {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		margin: 15px 0;
	}
	.menu_box_inner ul {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}
	.menu_box_inner ul li {
		width: 48%;
		margin-right: 4%;
		line-height: 1.4;
		text-align: left;
		margin-bottom: 30px;
	}
	.menu_box_inner ul li:nth-of-type(2n) {
		margin-right: 0;
	}
	#recommend ul {
        display: flex;
    }
	#recommend ul li {
        width: 30%;
        margin-right: 5%;
    }
	#recommend ul li:last-child {
        margin-right: 0;
    }
	#recommend ul li .data {
		font-family: 'Copperplate';
		font-size: 30px;
		letter-spacing: 0.1em;
		padding: 0;
	}
	#recommend ul li h3 {
		font-size: 18px;
		margin-bottom: 5px;
	}
	#recommend ul li span {
		font-family: 'Copperplate';
		font-size: 18px;
		padding: 2px 15px;
	}
	.top_shorei_box {
		width: 1100px;
		margin: 70px auto;
	}
	.top_shorei_box h3 {
		background: #f2f2ef;
		text-align: center;
		font-size: 24px;
		margin-bottom: 10px;
		padding: 20px 0;
	}
	.top_shorei_box h3 span {
		font-size: 16px;
	}
	.shorei_rn li {
		margin: 10px;
	}
	.sliderArea {
		max-width:100%;
		margin: 0 auto;
		padding: 0 25px;
	}
	.slick-slide {
		margin: 0 5px;
	}
	.slick-slide img {
		width: 100%;
		height: auto;
	}
	
	.slick-slide {
		transition: all ease-in-out .3s;
		opacity: .2;
	}
	.slick-active {
		opacity: 1;
	}
		
	.thumb {
		width: 280px;
		margin: 20px auto 0;
	
	}
	.thumb .slick-slide {
		cursor: pointer;
	}
	.thumb .slick-slide:hover {
		opacity: .7;
	}
	.thumb .slick-current {
		opacity: .5;
	}
	.lisk_text {
		font-size: 12px;
		line-height: 1.4;
	}
	.grad-trigger~.grad-btn::before {
        font-size: 12px;
    }
	.grad-item, .grad-item2 {
        padding: 40px 0;
    }
}
@media screen and (max-width: 760px) {
	main {
        margin-top: 83px;
		line-height: 2;
		height : 100%;
    }
	a:hover {
		transition : 0.5s;
	}
	.top_h2 {
		font-size: 28px;
        margin: 0 auto 40px;
        font-weight: bold;
        text-align: center;
		line-height: 1.4;
	}
	.main_visual {
		
		background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 94vw;
        width: 100%;
        margin: 0;
	}
	.main_visual_inner {
		width: 100%;
		height: 90vw;
        margin: auto;
        position: relative;
        top: 10%;
        left: 1.3%;
		color: #fff;
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	}
	.block_left {
		text-align: right;
		font-size: 18px;
		text-shadow: #ccb4b1 1px 0 10px;
	}
	.main_visual_inner h1 {
		font-size: 60px;
		text-shadow: #ccb4b1 1px 0 10px;
	}
	.visual_sub_text {
		display: flex;
	}
	.visual_sub_text .visual_tate_text {
		-ms-writing-mode: tb-rl;
  		writing-mode: vertical-rl;
		font-size: 16px;
	}
	.visual_color_number {
		font-size: 50px;
		background: linear-gradient(180deg, #fcf6da 0%, #f9ecac 40%, #f8e99d 80%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.main_visual_link {
		display: block;
        width: 72%;
        text-align: center;
        color: #000;
        border: 1px solid #000;
        padding: 1vw 0;
        font-size: 3.4vw;
        border-radius: 30px;
        background-color: rgba(255, 255, 255, .4);
        position: absolute;
        font-style: italic;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        bottom: 10vw;
        right: 3vw;
        font-weight: bold;
	}
	.main_visual_link span {
		color: #eebad0;
	}
	.main_visual_link:hover {
		background-color: rgba(255,255,255,1.0);
		transition : 0.5s;
		color: #000;
	}
	.main_visual_link:after {
		content: "";
        width: 2vw;
        height: 3.8vw;
        background-image: url(../images/top_rn/arrow_bk.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 32%;	
	}
	.visual_icon {
		position: absolute;
		top: -3vw;
        right: -11vw;
        width: 10vw;
	}
	.top_banner_rn {
		width: 92%;
		margin: 4vw auto;
		display: block;
		line-height: 1.2;
	}
	.top_banner_rn a {
		width: 100%;
        margin-bottom: 4%;
		display: block;
	}
	.top_banner_rn a p {
		text-align: center;
	}
	.top_banner_rn a:nth-of-type(2n) {
		margin-right: 0;
	}
	.top_link_rn {
		width: 92%;
		margin: 4vw auto;
		display: flex;
        flex-wrap: wrap;
	}
	.top_link_rn a {
		width: 48%;
		margin-right: 4%;
        margin-bottom: 2%;
		display: table;
		align-items: center;
		justify-content: center;
		background: #2e2e2e;
		color: #fff;
		padding: 3vw 0 1vw;
		text-align: center;
		font-size: 18px;
		border-radius: 5px;
		position: relative;
	}
	.top_link_rn a:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;	
	}
	.top_link_rn a:hover {
		background: #83c2ca;
	}
	.top_link_rn a img {
		height: 30px;
		margin-right: 15px;
		margin: auto;
		display: block;
	}
	.top_link_rn a:nth-of-type(2) img {
		height: 30px;
	}
	.top_link_rn a:nth-of-type(3) img {
		height: 30px;
	}
	.top_link_rn a:nth-of-type(2n) {
		margin-right: 0;
	}
	.top_link_rn00 {
		width: 92%;
		margin: 4vw auto;
		display: flex;
        flex-wrap: wrap;
	}
	.top_link_rn00 a {
		width: 48%;
		margin-right: 4%;
        margin-bottom: 2%;
		display: table;
		align-items: center;
		justify-content: center;
		background: #2e2e2e;
		color: #fff;
		padding: 3vw 0 1vw;
		text-align: center;
		font-size: 18px;
		border-radius: 5px;
		position: relative;
	}
	.top_link_rn00 a:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;	
	}
	.top_link_rn00 a:hover {
		background: #83c2ca;
	}
	.top_link_rn00 a img {
		height: 30px;
		margin-right: 15px;
		margin: auto;
		display: block;
	}
	.top_link_rn00 a:nth-of-type(2) img {
		height: 30px;
	}
	.top_link_rn00 a:nth-of-type(3) img {
		height: 30px;
	}

	.top_link_rn00 a:nth-of-type(2n) {
		margin-right: 0;
	}
	
	.reason_rn {
		width: 100%;
		margin: auto;
		font-size: 3vw;
		line-height: 2;
	}
	.reason_rn_box {
		width: 100%;
		margin: 4vw auto;
		display: table;
	}
	.reason_rn_box figure {
		width: 100%;
		margin-bottom: 4%;
	}
	.reason_rn_box p {
		width: 92%;
		margin: auto;
	}
	.reason_p {
		margin: 4vw auto;
		width: 92%;
	}
	.link_btn_middle {
		width: 92%;
        background: #2e2e2e;
        text-align: center;
        color: #fff;
        padding: 3vw 0;
        font-size: 4vw;
        position: relative;
        display: block;
        margin: 3vw auto;
        border-radius: 5px;
	}
	.link_btn_middle:hover {
		color: #fff;
		background: #83c2ca;
	}
	.link_btn_middle:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;
	}
	.menu_rn {
		width: 100%;
		padding: 7vw 0;
		background: #f2f2ef;
		margin: 7vw 0;
	}
	.menu_rn .menu_rn_inner {
		width: 100%;
		margin: auto;
	}
	.menu_rn .menu_list {
		display: flex;
		flex-wrap: wrap;
		width: 92%;
		margin: auto;
		justify-content: center;
	}
	.menu_rn .menu_list a {
		display: block;
		text-align: left;
		background: #2e2e2e;
		border-radius: 5px;
		color: #fff;
        padding: 3vw 0 3vw 3vw;
        font-size: 4vw;
		position: relative;
		margin-right: 4%;
		margin-bottom: 3vw;
		width: 48%;
	}
	.menu_rn .menu_list a:after {
		content: "";
        width: 16px;
        height: 20px;
        background-image: url(../images/top_rn/arrow_wh.png);
        background-repeat: no-repeat;
        background-position: center top 0px;
        background-size: contain;
        margin-right: 14px;
        position: absolute;
        right: 0vw;
        top: 37%;	
	}
	.menu_rn .menu_list a:nth-of-type(2n) {
		margin-right: 0;
	}
	.menu_rn .menu_list a:hover {
		background: #83c2ca;
	}
	.menu_box_inner {
		width: 100%;
		margin: 7vw auto;
	}
	.menu_box_inner .menu_box_h3 {
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		margin: 15px 0;
	}
	.menu_box_inner ul {
		display: table;
		width: 92%;
		flex-wrap: wrap;
		margin: auto;
	}
	.menu_box_inner ul li {
		width: 100%;
		margin-bottom: 4%;
		line-height: 1.4;
		text-align: left;
		margin-bottom: 3vw;
	}
	.menu_box_inner ul li:nth-of-type(2n) {
		margin-right: 0;
	}
	#recommend ul li {
		width: 100%;
		margin-right: 7vw;
		height: 60vw;
	}
	#recommend ul li img {
		width: 70vw;
		max-width: none;
	}
	#recommend ul li:last-child {
		margin-right: 0;
	}
	#recommend ul li .data {
		font-family: 'Copperplate';
		font-size: 5vw;
		letter-spacing: 0.1em;
		padding: 0;
	}
	#recommend ul li h3 {
		font-size: 3vw;
		margin-bottom: 1vw;
	}
	#recommend ul li span {
		font-family: 'Copperplate';
		font-size: 2.6vw;;
		padding: 2px 15px;
	}
	.top_shorei_box {
		width: 100%;
		margin: 70px auto;
	}
	.top_shorei_box h3 {
		background: #f2f2ef;
		text-align: center;
		font-size: 24px;
		margin-bottom: 10px;
		padding: 20px 0;
	}
	.top_shorei_box h3 span {
		font-size: 16px;
	}
	.shorei_rn li {
		margin: 10px;
	}
	.sliderArea {
		max-width:100%;
		margin: 0 auto;
		padding: 0 25px;
	}
	.slick-slide {
		margin: 0 5px;
	}
	.slick-slide img {
		width: 100%;
		height: auto;
	}
	
	.slick-slide {
		transition: all ease-in-out .3s;
		opacity: .2;
	}
	.slick-active {
		opacity: 1;
	}
		
	.thumb {
		width: 100%;
		margin: 2vw auto;
		        display:  table;
        justify-content: center;
	
	}
	.thumb .slick-slide {
		cursor: pointer;
		display:  inline-block;
	}
	.thumb .slick-slide:hover {
		opacity: .7;
	}
	.thumb .slick-current {
		opacity: .5;
	}
	.lisk_text {
		font-size: 12px;
		line-height: 1.4;
		width: 92%;
		margin: 2vw auto;
	}
	.grad-trigger~.grad-btn::before {
        font-size: 12px;
    }
	.grad-item, .grad-item2 {
        padding: 40px 0;
    }
	

}