﻿@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
.font1,
.con_title{
    font-family: 'Zen Kurenaido','Noto Sans JP', 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fon_jos,
#con_nav li:last-child a{
    font-family: 'Caveat', cursive;
}

/*
.fixbnr{
    position:absolute;
}
*/

/*--all page---------------------------
-------------------------------------*/

.linkStyle{
    color:#FFB3B3;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
    text-decoration:underline;
}

body{
    overflow:hidden;
}
.fixbnr{
    
}

#con_nav ul{
    max-width: initial;
}
#con_nav ul li h2{
    font-size:1.2rem;
}
#con_nav ul li p{
    opacity:0.9;
}

footer{
    background-color:#fff!important;
}
#footer_info{
    display:none;
}


/*--top page---------------------------
-------------------------------------*/
.toppage h1 {
    position: absolute;
    width: 300px;
    top: 0;
    left: 0;
    z-index: 2;
}
#main_img{
    margin-right: 0;
    margin-left: auto;
}
.mainwrap-l{
    width:100%;
}
.main_img2{
    width:350px;
    height:auto;
    left:-10px;
    bottom:10px;
}
.scroll{
    left:auto;
    right:40px;
}
.toppage #con_nav ul{
    background-color:transparent!important;
}
.top_news_outer{
    background-image:url(./Dup/img/back1.png),url(./Dup/img/back2.png);
    background-repeat:no-repeat,no-repeat;
    background-size:600px,700px;
    background-position:top left,bottom right;
}
#top_news{
    background:url(./Dup/img/note.png) no-repeat;
    background-size:100% 100%;
}
.top_news_item {
    width: 15vw;
    max-width: 220px;
    top: -56px;
    left: -120px;
    z-index: 2;
}
.attach_box .sub_title{
    width:200px;
    margin:20px auto;
}
.pen {
    width: 20vw;
    max-width: 500px;
    right: 90px;
    top: -60px;
    z-index: 2;
    transform: rotate(285deg);
}
#attach_area::before,
#attach_area::after{
    content:'';
    position:absolute;
    display:block;
    z-index:2;
}
#attach_area::before{
    width:32vw;
    height:500px;
    background-image:url(./Dup/img/item1.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom left;
    bottom:0;
    left:0;
}
#attach_area::after{
    width:30vw;
    height:500px;
    background-image:url(./Dup/img/item2.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom right;
    bottom:0;
    right:0;
}
#attach{
    height:820px;
}
.attach_box {
    border: 3px solid #fff;
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(5px);
}
.attach_txt span{
    background:url(./Dup/img/line.png) no-repeat bottom;
}

.con3_wrap .con3_txt_wrap,
.con3_wrap2 .con3_txt_wrap,
.con3_wrap3 .con3_txt_wrap{
    position:relative;
}
.con3_wrap .con3_txt_wrap::before,
.con3_wrap2 .con3_txt_wrap::before,
.con3_wrap3 .con3_txt_wrap::before{
    content:'';
    position:absolute;
    display:block;
}
.con3_wrap .con3_txt_wrap::before {
    width: 200px;
    height: 250px;
    background: url(./Dup/img/item4.png) no-repeat;
    background-size: contain;
    top: -127px;
    left: -78px;
}
.con3_wrap2 .con3_txt_wrap::before {
    width: 184px;
    height: 210px;
    background: url(./Dup/img/item5.png) no-repeat;
    background-size: contain;
    top: -127px;
    left: -126px;
}
.con3_wrap3 .con3_txt_wrap::before {
    width: 179px;
    height: 202px;
    background: url(./Dup/img/item6.png) no-repeat;
    background-size: contain;
    top: -180px;
    left: -132px;
}
#top_contents3{
    background-image:url(./Dup/img/back3.png),url(./Dup/img/back4.png);
    background-repeat:no-repeat,no-repeat;
    background-size:500px,500px;
    background-position:top left,bottom right;
}
#top_contents3 .con_title{
    letter-spacing: -1px;
}
.item7{
    width:120px;
}
/*
#top_cms .cms_title{
    position:relative;
}
#top_cms .cms_title::before{
    content:'';
    position:absolute;
    display:block;
    width:120px;
    height:70px;
    background:url(./Dup/img/item7.png) no-repeat;
    background-size:contain;
    bottom:20px;
    right:45%;
}
*/
.cms_2-f .box_wrap {
    box-shadow: none;
}


/*--under page---------------------------
-------------------------------------*/
#page_title .title_wrap{
    color: #594545;
    max-width:800px;
}
#page_title{
    text-shadow:0 0 5px #fff;
}
.under_page h1 a {
    position: absolute;
    top: 20px;
    left: 10px;
    max-width: 300px;
}

/*記事URL化*/
#cms_1-a .input {
    position: relative;
    padding: 2px 3px 2px 5px;
    /* background: #fff; */
    color: #594545;
    margin-bottom: 30px;
    margin-right: 20px;
    position: relative;
    display: inline-block;
    
}
#cms_1-a .input:before {
    display: block;
    position: absolute;
    content: "";
    background-image: url(Dup/img/copy.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    top: 12px;
    left: 14px;
    z-index: 1;
}
#cms_1-a input {
    padding: 6px 13px 5px 30px;
    background: transparent;
    color: #594545;
    border: 1px solid #594545;
    border-radius: 5px;
    cursor: pointer;
}
#cms_1-a input:hover{
    transition:all 0.3s;
    background:#fff;
}

/* ---------- responshive ---------- */
@media screen and (max-width: 1800px){
.top_news_item {
    width: 9vw;
}
}

@media screen and (max-width: 1300px){
.top_news_item {
    left: 25px;
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.loader_icon {
    width: 330px;
}
#top_news {
    background: url(./Dup/img/note_tb.png) no-repeat;
    background-size: 100% 100%;
}
.top_news_item {
    width: 17vw;
    top: -120px;
    left: -22px;
}
.pen {
    width: 27vw;
    right: 16px;
    top: 25px;
}
#attach_area::before {
    width: 45vw;
    height: 200px;
}
#attach_area::after {
    width: 50vw;
    height: 220px;
}
.con3_wrap .con3_txt_wrap::before{
    left:auto;
    right: -78px;
}
.con3_wrap2 .con3_txt_wrap::before{
    display:none;
}
.con3_wrap3 .con3_txt_wrap::before{
    top: -195px;
    left: -5px;
}
.under_page h1 a {
    top: 0;
    left: 0;
    max-width: 250px;
}

#cms_1-a .input:before{
    top: 8px;
}

}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.loader_icon {
    width: 250px;
}
.toppage h1 {
    width: 200px;
}
.catch{
    width: 67%;
    top: 47%;
}
#top_news {
    background: url(./Dup/img/note_sp.png) no-repeat;
    background-size: 100% 100%;
}
.top_news_item {
    width: 25vw;
    top: -108px;
}
.item7{
    width:100px;
}
.pen{
    width: 53vw;
    top: -230px;
}
.attach_txt span {
    background: none;
}
#attach_area::before,
#attach_area::after{
    width: 60vw;
}
#top_contents3{
    background-size: 300px,300px;
}
.con3_wrap .con3_txt_wrap::before{
    right: -42px;
    width: 120px;
    top: -148px;
}
.con3_wrap3 .con3_txt_wrap::before {
    width: 110px;
}
.under_page h1 a{
    max-width:200px;
}
#page_title h2{
    font-size:24px;
    letter-spacing:0;
    text-shadow:0 0 5px #fff;
}

#cms_1-a input{
    font-size: 0.8rem;
}
#cms_1-a .input:before{
    top: 8px;
}
}




