/*スクショ*/
/*html, body{overflow: auto}*/
/*.pp-section{position: static}*/
/* all page */
/*fonts*/
/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
:root{
--color1: #fc6744;
--color2: #f8acde;
--color3: #4a80ff;
--color4: #f7d933;
--color5: #00c76b;
--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;
}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}
/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
/*.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}*/
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/
.bg_color5, .hvr_bg_color5:hover{background-color: var(--color5);}
/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
/*.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}*/
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}*/
#contents .con_bg, #contents2 .con_bg {background-color: #fff;}
#wrap{overflow: hidden;}
header .nav_bg, #pp-nav.right, .more a, #page05 .cate_title {border: 1px solid #212121;}
/* header */
header .nav_bg.trans {border: none;}
#pp-nav.right {
background-color: var(--color4);
border-radius: 50px;
z-index: 5;
}
/* footer */
/* top ----------------------------------------------------------------*/
#custom .custom_img1, #custom .custom_img2, #intro, #contents, #contents2, #top_cms {
height: calc(100vh - 0.5px);
}
/* main img */
#custom .custom_wrap{overflow: hidden;}
/*#custom .custom_img1, #custom .custom_img2{height: 100vh;}*/
#custom .catch_l{
left: 0;
top: 0;
height: 100%;
width: 5%;
max-width: 100px;
padding: 0 3%;
border-right: 3px dotted #121212;
opacity: 0;
transition: 0.5s;
}
#custom .catch_r {
right: 0;
bottom: 0;
height: 100%;
width: 5%;
max-width: 100px;
padding: 0 3%;
border-left: 3px dotted #121212;
opacity: 0;
transition: 0.5s;
}
#custom .catch_l.trans{
opacity: 1;
transition-delay: 1.0s;
}
#custom .catch_r.trans{
opacity: 1;
transition-delay: 1.5s;
}
#custom .illust {
height: 41%;
max-height: 450px;
top: auto;
bottom: -20px;
transform: translateX(-50%);
}
#custom .illust img{
width: auto;
height: 100%;
}
#custom .catch1{
width: 26%;
max-width: 480px;
transform: translate(-50%,100px);
transition: 0.5s;
opacity: 0;
}
#custom .catch1.trans{
transform: translate(-50%,-50%);
opacity: 1;
transition-delay: 0.5s;
}
#custom .catch2{
width: 25%;
max-width: 420px;
top: 2%;
left: 13%;
transition: 0.8s;
opacity: 0;
}
#custom .catch3{
width: 35%;
max-width: 630px;
bottom: 2%;
right: 13%;
transition: 0.8s;
opacity: 0;
}
#custom .catch2.trans{
opacity: 1;
transition-delay: 1.9s;
}
#custom .catch3.trans{
opacity: 1;
transition-delay: 2.2s;
}
/* main */
/* intro */
/* contents */
#contents .con_box1::before{display: none;}
#contents .con_box1, #contents2 .con_box2 {
padding: 30px;
margin-bottom: 0;
border: 2px dotted #121212;
}
#contents .con_img, #contents2 .con_img {
border: 1px solid #212121;
}
#contents2 .con_wrap {right: -10px;}
#contents2.trans .con_wrap{
opacity: 1;
right: 0;
}
#contents2 .con_img {
top: 100px;
bottom: 100px;
left: 0;
}
#contents .con_no, #contents2 .con_no {
font-size: 23px;
font-weight: bold;
display: inline-block;
padding: 5px;
background-color: var(--color5);
border-radius: 100%;
color: #fff;
width: 50px;
height: 50px;
text-align: center;
}
#contents2 .con_no {background-color: var(--color3);}
#contents .con_bg, #contents2 .con_bg {
border-left: 3px dotted #121212;
}
/* topcms */
#top_cms .cms_title{border-top: 1px dotted #cccccc;}
#top_cms .cms_title span {
background: none;
border-left: 1px dotted #cccccc;
}
/* under page ----------------------------------------------------------------*/
/* cms1 */
/* cms2 */
/* cms3 */
/* cms4 */
/* cms5 */
/* page7 */
/* page8 */
/* page9 */
/* page10 */
/* ---------- 1536px ---------- */
@media screen and (max-width: 1536px){}
/* ---------- 1366px ---------- */
@media screen and (max-width: 1366px){}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#custom .custom_img1, #custom .custom_img2 {height: 50vh;}
#custom .catch_l {
height: 5%;
max-height: 100px;
width: 100%;
max-width: none;
padding: 2% 0;
border-bottom: 3px dotted #121212;
}
#custom .catch_r {
height: 5%;
max-height: 100px;
width: 100%;
max-width: none;
padding: 2% 0;
border-top: 3px dotted #121212;
}
#custom .catch_l img, #custom .catch_r img{
width: auto;
height: 100%;
}
#custom .catch1 {
width: 52%;
max-width: 400px;
}
#custom .catch2 {
width: 40%;
top: 10%;
left: auto;
right: 5%;
}
#custom .catch3 {
width: 60%;
bottom: 10%;
right: auto;
left: 5%;
}
#contents .con_bg, #contents2 .con_bg {border-left: none;}
#contents2 .con_wrap {
transform: none;
z-index: 3;
opacity: 1;
right: 0;
}
#contents2 .con_img{z-index: 0;}
#contents2 .con_bg{width: 100% !important;}
#contents2 .con_img {
height: 65vw;
top: auto!important;
bottom: -15px!important;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#custom .catch1 {width: 68%;}
#custom, #custom .custom_wrap{
height: 100dvh!important;
overflow: hidden!important;
}
#intro{
background-color: #fff;
position: relative;
z-index: 2!important;
}
}
/*20230705*/
/*固定バナー*/
.banner__fixed {
position: fixed;
top: 20px;
right: 110px;
max-width: 300px;
min-height: 80px;
z-index: 8;
}
.banner__fixed a {
padding: 22px;
border: 1px solid #212121;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.banner__fixed {
top: 0;
right: 60px;
}
.banner__fixed a {padding: 10px;}
}