@charset "UTF-8";

/*ABOUTページ独自css*/
#about_btn + div .inner_item {
    height: 350px;
}
#about_btn + div .heading.block_header_4 .h {
    font-size: 5.2rem !important;
    transition: 0.3s ease-in-out;
}
#about_btn +div.block_images_7 .inner_item > a:hover + .inner_item_txt .heading.block_header_4 .h {
    color: transparent !important;
    -webkit-text-stroke: 2px #fff !important;
    transition: 0.3s ease-in-out;
}
#about_btn + div .heading.block_header_4 p{
    font-size: 2.0rem;
    margin-top: -10px;
}
#about_btn + div{
    opacity: 1;    
}
#about_btn + div .heading.block_header_4 .h,
#about_btn + div .heading.block_header_4 p,
#about_btn + div.block_images_7 .inner_item_txt > p{
    opacity: 0;
}
#about_btn + div.trigger .heading.block_header_4 .h,
#about_btn + div.trigger .heading.block_header_4 p{
	opacity: 1;
	-webkit-animation: showFromLeft .9s ease 0.3s both 1 normal;
	animation: showFromLeft .9s ease 0.3s both 1 normal; 
}
#about_btn + div.trigger.block_images_7 .inner_item_txt > p{
	opacity: 1;
	-webkit-animation: showFromBottom .9s ease 0.7s both 1 normal;
	animation: showFromBottom .9s ease 0.7s both 1 normal;    
}
.about_btn {
    border: 2px solid var(--i_sub2_color);
    width: 230px !important;
    margin: 0 auto;
    margin-bottom: 0px;
    font-size: 1.55rem;
    padding: 4px;
    background: var(--i_sub2_color);
    color: var(--i_txt_color);
	  position: relative;
    margin-left: 0;
}
.about_btn:before{
    position: absolute;
    content: " ";
    width: 7px;
    height: 7px;
    top: calc(50% - 4px);
    left: 5px;
    border-top: 1px solid var(--i_txt_color);
    border-right: 1px solid var(--i_txt_color);
    transform: rotate(45deg);
    transition: all 0.3s ease;
    z-index: 10;	
}
#about_btn + div.block_images_7 .inner_item > a:hover + .inner_item_txt .about_btn{
    background: transparent;
    color: var(--i_sub2_color);
}
#about_btn + div.block_images_7 .inner_item > a:hover + .inner_item_txt .about_btn:before{
    left: 10px;
    border-top: 1px solid var(--i_sub2_color);
    border-right: 1px solid var(--i_sub2_color);    
}
#greeting + section .content_wrapper {
    margin-left: 210px;
}
#greeting + section .heading.block_header_4 .h{
    font-size: 3.8rem !important;
    margin-bottom: 0;
}
#greeting + section .heading.block_header_4 p{
    font-size: 1.8rem;
}
#greeting_photo + section {
    height: 500px;
}
#about_greeting + section {
    margin-top: -650px;
}
#about_greeting +section .content_wrapper {
    margin-left: 150px;
    background: #eee;
    padding: 90px;
}
#about_greeting + section .heading.block_header_1 p {
    font-size: 4.7rem !important;
}
#about_greeting + section .heading.block_header_1 .h {
    font-size: 2.6rem !important;
}
#about_greeting + section .heading h2,
#about_greeting + section .heading.block_header_1 p,
#about_greeting + section .inner_item_txt p{
    opacity: 0;
}
#about_greeting + section.trigger .heading h2,
#about_greeting + section.trigger .heading.block_header_1 p{
	opacity: 1;
	-webkit-animation: showFromLeft .9s ease .3s both 1 normal;
	animation: showFromLeft .9s ease .3s both 1 normal; 
}
#about_greeting + section.trigger .inner_item_txt p{
	opacity: 1;
	-webkit-animation: showFromBottom .9s ease 1.1s both 1 normal;
	animation: showFromBottom .9s ease 1.1s both 1 normal;     
}
.president_name span {
    font-size: 3.6rem;
    font-weight: 600;
}
.works_txt_b {
    color: var(--i_txt_color);
}
.works_txt_w {
    color: transparent;
    -webkit-text-stroke: 2px var(--i_txt_color);
}
.about_txt {
    animation: scrolltxt02 25s linear 0s infinite normal;
}
#top_about + section {
    margin-top: -280px;
    z-index: 1;
}
#top_event + section{
    margin-top: 0;
}
#top_event + section::before,
#top_creative + section::before{
    background: #eee;

}
#top_event + section .heading.block_header_1 p,
#top_creative + section .heading.block_header_1 p,
#greeting + section .heading.block_header_1 p,
#about_pholo_txt + section .heading.block_header_1 p,
#access_title + section .heading.block_header_1 p{
  font-size: 6.3rem !important;
}
#top_event + section .heading.block_header_1 h2,
#top_creative + section .heading.block_header_1 h2,
#greeting + section .heading.block_header_1 h2,
#about_pholo_txt + section .heading.block_header_1 h2,
#access_title + section .heading.block_header_1 h2{
  font-size: 2.3rem;
}
#top_event + section .heading{
    width: 45% !important;
}
#top_event + section .wrapper_item{
    width: 55% !important;
}
#about_pholo_photo + section {
    margin-top: -100px;
}
#about_pholo_txt2 + div .inner_item_txt > p {
    font-size: 90%;
}
#about_pholo_txt2 + div .heading.block_header_4 .h {
    font-size: 3.4rem !important;
}
#about_pholo_txt2 + div .heading.block_header_4 p{
    font-size: 2.0rem;
}
.cp_linetab .cp_linetab-content p{
    padding: 30px;
    line-height: 2.3;
    text-align: left;
}
.cp_linetab .cp_linetab-content p span {
    background: none;
    display: block;
    font-weight: 500;
    margin-top: 10px;
    padding: 0;
    font-size: initial;
    line-height: 2.3;
}
#top_creative + .contents_box01 .content_wrapper{
    margin-left: 130px;
}
#about_company_img + section .content_wrapper {
    margin-right: 0;
}
#about_company_img + section {
    margin-top: -420px;
}
#about_pholo_txt2+.composite_box01 .inner_item{
	opacity: 0;
	transition: opacity .3s ease;
}
#about_pholo_txt2+.composite_box01.trigger .inner_item{
	opacity: 1;
	-webkit-animation: showFromBottom .9s ease .3s both 1 normal;
	animation: showFromBottom .9s ease .5s both 1 normal;
}
#about_pholo_txt2+.composite_box01.trigger .inner_item:nth-child(2){
	animation-delay: .7s;
}
#about_pholo_txt2+.composite_box01.trigger .inner_item:nth-child(3){
	animation-delay: 1.1s;
}
#about_pholo_photo_sp + section{
    display: none;
}
.map iframe {
    width: 100%;
    height: 20vw;
    min-height: 300px;
    max-height: 450px;
    position: relative;
}
@media screen and (min-width: 2349px){
    #greeting_photo + section {
        height: 630px;
    }
    #about_greeting + section {
        margin-top: -700px;
    }
    #top_about + section{
        margin-top: -260px;
    }
    #top_creative + .contents_box01 .content_wrapper {
        margin-left: 230px;
    }
    #about_company_img + section .content_wrapper{
        max-width: 1400px !important;
    }
}
@media screen and (max-width: 1700px){
    #top_event + .contents_box01 .content_wrapper{
        max-width: 78vw !important;
    }
    #top_event + section::before, #top_creative + section::before{
        width: 80%;
    }
    #about_company_img + section .content_wrapper{
        max-width: 1050px !important;
    }
}
@media screen and (max-width: 1600px){
    #greeting + section .content_wrapper {
        margin-left: 190px;
    }
    #about_greeting +section .content_wrapper{
        padding: 70px;        
        max-width: 800px !important;       
    }
    #top_about + section {
        margin-top: -340px;
    }
    #top_event + section .wrapper_item {
        width: 50% !important;
    }
    #about_company_img + section .content_wrapper {
        max-width: 800px !important;
        margin-bottom: 70px;
    }
}
@media screen and (max-width: 1400px){
    #about_greeting + section .heading.block_header_1 p {
        font-size: 4.0rem !important;
    }
    #top_event + section .heading.block_header_1 p,
    #top_creative + section .heading.block_header_1 p,
    #greeting + section .heading.block_header_1 p,
    #about_pholo_txt + section .heading.block_header_1 p,
    #access_title + section .heading.block_header_1 p {
        font-size: 5.1rem !important;
    }
    #about_greeting +section .content_wrapper{
        max-width: 660px !important;
    }
    #about_company_img + section .content_wrapper{
        max-width: 690px !important;
    }
    #about_pholo_txt2 + div .heading.block_header_4 .h {
        font-size: 2.8rem !important;
    }    
}
@media screen and (max-width: 900px){
    #greeting + section .content_wrapper {
        margin-left: 72px;
    }
    #top_about + section {
        display: block;
    }
    #top_about + section {
        margin-top: -320px;
    }
    #about_btn + div .inner_item {
        height: initial;
    }
    #about_btn + div .heading.block_header_4 .h{
        font-size: 3.7rem !important;
    }
    #about_greeting + section {
        margin-top: initial;
    }
    #greeting_photo + section {
        height: 200px;
    }
    #about_greeting +section .content_wrapper {
        max-width: 95% !important;
        margin: 0 auto;
    }
    #top_event + section .wrapper_item {
        width: 90% !important;
    }
    #top_event + .contents_box01 .content_wrapper {
        max-width: 70vw !important;
    }
    #about_company_img + section {
        margin-top: -120px;
    }
    #about_company_img + section .content_wrapper {
        max-width: 820px !important;
    }
    #top_creative + .contents_box01 .content_wrapper {
        margin-left: 90px;
    }
    #top_creative + section .wrapper_item {
        width: 75% !important;
    }
    #about_company_img + section .content_wrapper{
        margin-bottom: initial;
    }
    .cp_linetab label{
        width: 55%;
    }
    .cp_linetab .cp_linetab-content p{
        padding: 20px;
    }
}
@media screen and (max-width: 800px){
    #greeting + section .content_wrapper {
        margin-left: 68px;
    }
    #about_btn + div .heading.block_header_4 .h {
        font-size: 3.5rem !important;
    }
    #about_pholo_photo + section{
        display: none;
    }    
    #about_pholo_photo_sp + section{
        display: block;
        margin-top: -100px;
    }    
}
@media screen and (max-width: 700px){
    #greeting + section .content_wrapper {
        margin-left: 43px;
    }
    #about_btn + div .heading.block_header_4 .h {
        font-size: 4.5rem !important;
    }
    #about_btn + div .inner_item {
        height: 300px;
    }
    #greeting_photo + section {
        height: 150px;
    }
    #about_greeting +section .content_wrapper {
        padding: 45px;
    }
    .about_txt {
        font-size: 8rem;
        margin-top: 100px;
    }
    a#about_pholo_txt2 + div {
        padding-bottom: 50px;
    }
}
@media screen and (max-width: 600px){
    #greeting + section .content_wrapper {
        margin-left: 40px;
    }
}
@media screen and (max-width: 500px){
    #about_greeting + section .heading.block_header_1 p {
        font-size: 3.5rem !important;
    }
    #top_event + section::before,
    #top_creative + section::before{
        width: 90%;
    }
    #top_event + .contents_box01 .content_wrapper {
        max-width: 80vw !important;
    }
    #top_creative + .contents_box01 .content_wrapper {
        margin-left: 30px;
    }
    #top_creative + section .wrapper_item {
        width: 90% !important;
    }
    .block_table_3 table th, .block_table_7 table th {
        text-align: left;
    }
}
@media screen and (max-width: 450px){
    #top_event + section .heading.block_header_1 p,
    #top_creative + section .heading.block_header_1 p,
    #greeting + section .heading.block_header_1 p,
    #about_pholo_txt + section .heading.block_header_1 p,
    #access_title + section .heading.block_header_1 p {
        font-size: 4.6rem !important;
    }   
}
@media screen and (max-width: 400px){
    #greeting_photo + section {
        height: 50px;
    }
    #about_greeting + section .heading.block_header_1 p {
        font-size: 3.2rem !important;
    }
    #top_event + section .heading.block_header_1 p,
    #top_creative + section .heading.block_header_1 p,
    #greeting + section .heading.block_header_1 p,
    #about_pholo_txt + section .heading.block_header_1 p,
    #access_title + section .heading.block_header_1 p {
        font-size: 4.0rem !important;
    }
    #top_event + section .wrapper_item {
        width: 100% !important;
    }
    #greeting + section .content_wrapper {
        margin-left: 32px;
    }    
}
@media screen and (max-width: 380px){
    #about_greeting +section .content_wrapper {
        padding: 30px;
    }
    #about_greeting + section .heading.block_header_1 .h {
        font-size: 2.2rem !important;
    }
    #greeting + section .content_wrapper {
        margin-left: 19px;
    }
    #top_event + section::before,
    #top_creative + section::before {
        width: 95%;
    }
    #top_event + .contents_box01 .content_wrapper {
        max-width: 88vw !important;
    }
    #top_creative + .contents_box01 .content_wrapper {
        margin: 0 auto;
    }
    #top_creative + section .wrapper_item {
        width: 98% !important;
    }
}