@charset "UTF-8";
/* base
------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");
:root {
    --color-wh:#FFFFFF;
    --font-size-sm: clamp(0.7rem, 0.05vw + 0.69rem, 0.75rem);
    --font-size-base: clamp(0.88rem, 0.13vw + 0.84rem, 1rem);
    --font-size-md: clamp(1.09rem, 0.25vw + 1.03rem, 1.33rem);
    --font-size-lg: clamp(1.37rem, 0.44vw + 1.25rem, 1.78rem);
    --font-size-xl: clamp(1.71rem, 0.7vw + 1.53rem, 2.37rem);
    --font-size-xxl: clamp(2.14rem, 1.08vw + 1.86rem, 3.16rem);
    --font-size-xxxl: clamp(2.67rem, 1.63vw + 2.25rem, 4.21rem);
    --color-base: #1e3e77;

}

html {
  font-family: "Spartan", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.8;
  height: 100%;
  word-break: break-word;
  color: #333;
  background-color: var(--color-wh);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

::-moz-selection {
  color: #fff;
  background: var(--color-theme);
}

::selection {
  color: #fff;
  background: var(--color-theme);
}

img {
  border: 0;
  margin: 0;
  width: 100%;
}

figure {
  margin: 0;
  width: 100%;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h3,
h4,
h5,
h6 {
  font-size: var(--font-size-base);
  margin: 0;
  padding: 0;
　font-weight: normal;
}

h2{
    display: block;
    max-width: 1680px;
    width: 100%;
    padding: 10rem 5rem 5rem 5rem;
    margin: auto;
    text-align: left;
    font-size: var(--font-size-base);
    font-weight: normal;
}

main {
  display: block;
}



/*heder----------------------------------------*/

header{
    width: 100%;

    .head-img{
        display: grid;
        grid-template-columns: 25% 1fr;
        position: relative;

        h1.title{
        position: absolute;
        left:3%;
        top:30%;
        font-size:var(--font-size-xxl);
        }
    }
    .main-img img{
        border-radius: 0px 0px 0px 50px;
    }

}


/*index---------------------------------------*/

div.index{

    p[class$="-label"]{
    padding:0 1rem;    
    border-left:1px solid #666666;
    line-height: 1;  
    }

    p[class$="-title"]{
        padding:0.5rem 0 1rem 0;
        font-size:var(--font-size-xl);
    }
}

/*movie---------------------------------------*/


div.vid_contents {
width: 100%;
text-align: center;
margin: auto;
padding: 4%;
}
video.vid_main {
width: 100%;
max-width: 920px;
}


/*about---------------------------------------*/

.aboutWrap{
    background: #000;
    width: 100%;
    color: var(--color-wh);
    

    h2 {
        display: block;
        max-width: 1680px;
        width: 100%;
        padding: 5rem 5rem 2rem 5rem;
        margin: auto;
        text-align: left;
        font-size: var(--font-size-base);
        font-weight: normal;
    }

    p {
        display: block;
        max-width: 1680px;
        width: 100%;
        padding: 0 5rem 5rem 5rem;
        margin: auto;
        text-align: left;
        font-size: var(--font-size-base);
        font-weight: normal;
    }
    
    
}

/*more---------------------------------------*/

div[class="more"]{
    display: block;
    max-width: 1680px;
    width: 100%;
    text-align: center;
    padding: 5rem 0;
    margin: 0 auto;
}


.cta {
  border: none;
  background: none;
}

.cta span {
  padding-bottom: 7px;
  letter-spacing: 4px;
  font-size: var(--font-size-base);
}

.cta svg {
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active svg {
  transform: scale(0.9);
}

.hover-underline-animation {
  position: relative;
  color: black;
  padding-bottom: 20px;
}

.hover-underline-animation:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.cta:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}



/*footer---------------------------------------*/
.footerWrap{
    max-width: 1280px;
     width: 98%;
    padding: 5rem 1rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    }
    
.footermenu ul li img{
        width: 25px;
    }

/* contents
--------------------------------------------------*/

.mihonWrap{
    max-width: 1280px;
    width: 96%;
    margin: 3rem auto;
    
    div[class$="Img"] img{
        border-radius:30px;        
        
    }
}


.detailWrap{
    max-width: 1280px;
    width: 96%;
    margin: 0 auto 10rem auto;


     h2{
        padding: 5rem 0 0;
    }

    h3{
        font-size: var(--font-size-xl);
        padding: 1rem 0;
    }

     h4{
        font-size: var(--font-size-md);
        padding: 1rem 0;
    }
    
    p{
        padding-top: 1.5rem;
    }
    
    .pdf_link{
        padding: 1rem 0;
        
        a:link{text-decoration: underline;}
        a:hover{text-decoration: none;}
    }    
}


.related-img{
     max-width: 500px;
     width: 100%;
     margin: 0 0 5rem;
     border-radius: 30px;
    
    img{
     border-radius: 30px;
    }
}
.related-img.flex_img{
     max-width: 1000px;
     width: 100%;
     display: flex;
     justify-content: space-around;
    
        a{
        display: block;    
         margin-right: 2rem;

        }
}



.relatedWrap{
        background: #eeeeee;
    .relatedImg {
        max-width: 1280px;
        width: 96%;
        display: flex;
        justify-content:space-between;
        align-items: center;
        padding: 2rem 0 ;
        margin: auto;
        
        li{
            margin-inline-end: 2rem;
            
            img{
                border-radius: 30px;
            }
            
         }
        
        li:last-child{
        margin-inline-end: 0rem;
        }
    }
}

.relatedWrap h2{
    max-width: 1280px;
    width: 96%;
    padding:2rem 0;
}


@media screen and (max-width:768px){    
h2{
    display: block;
    max-width: 1680px;
    width: 100%;
    padding: 2rem 5rem 5rem 5rem;
    }
    
    .relatedWrap{
        background: #eeeeee;
        
    .relatedImg {
        max-width: 1280px;
        width: 80%;
        display: block;
        justify-content:space-between;
        align-items: center;
        padding: 2rem 0 ;
        margin: auto;
        
        li{
            margin-inline-end: 0rem;
            margin-block-end: 2rem;
            
            img{
                border-radius: 30px;
            }
            
         }
        
        li:last-child{
        margin-inline-end: 0rem;
        }
    }
}
    .footerWrap{
        width: 100%;
        padding: 5rem 2rem;
    }

}
    
@media screen and (max-width:599px){
    .detailWrap{
    margin: 0 auto 3rem auto;
    }
    .mihonWrap{
        width: 100%;
        margin: 0;
        div[class$="Img"] img {
            border-radius:0 0 30px 30px  ;
        }
    }
    .l-inner{
        max-width: 100%;
    }    

}

/*work
-------------------------------------------------------------*/
h1.title_head{
    width: 100%;
    background: #EEEEEE;
    font-size: var( --font-size-xxl);
    text-align: center;
    padding: 3rem;
    margin-bottom: 10rem;
}


.workWrap{
    max-width: 1680px;
    width: min(100% - 3rem);
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
    .menuWrap{
        width: 15%;
    }
    
    .workImg{
        width: 85%;
        
        h2{
            padding: 0;
            }
    }
    
}

.workImg{
    
    ul{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
        
        li{
            width: 100%;
            margin-bottom: 5rem;
            
            img{
                width: 100%;
                border-radius: 30px;
            }
        }
    }
}

.tab{

    li a{
        display: block;
        margin:0 2px;
        padding:10px 20px;
        color: #EEE;
        text-align: left;

    }

     li.active a{
        background:#fff;
        color: black;
        font-weight: bold;
    }

}


.area {
	display: none;
	opacity: 0;
	background: #fff;
	padding:0 20px;
}

.area.is-active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


@media screen and (max-width:768px){
.menuWrap{   
    margin: 0 auto 2rem;
    text-align: center;
    } 
    
.workWrap{
    display: block;
    margin: 0 auto;
    
    .menuWrap{
        width: 90%;
    }
    
    .workImg{
        width: 90%;
     margin: 0 auto;
       
    }
 }
    
.workImg{
    
    ul{
       grid-template-columns: repeat(1, 1fr);
       gap: 2rem 0; 
    }
 }

/*動く左カラム*/
aside{
    position: -webkit-sticky;
	position: sticky;
	top: 0;
    background:#fff;
}

}
@media screen and (max-width:768px){
aside{
	position:relative;
    top:0;
}
}


/* banner
-----------------------------------------------*/
    
.bannerWrap{
    max-width: 1280px;
    width: min(100% - 3rem);
    margin: 2rem auto;
    display: block;
}

    
.bannerImg ul{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3rem;
        
        li{
            width: 100%;
            margin-bottom: 5rem;
            text-align: left;
            
            img{
                width: 100%;
                border-radius: 30px;
            }
        }
    }

@media screen and (max-width:768px){
.bannerImg ul{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
        
        li{
            width: 100%;
            margin-bottom: 5rem;
            text-align: left;
            
            img{
                width: 100%;
                border-radius: 15px;
            }
        }
    }
}




/*  popup  */
.hide-area{
	display: none;
}

.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

.modaal-outer-wrapper{
    background: #000000;
}

.modaal-container {
    border-radius: 15px;
    border: 5px solid var(--color-base);
    line-height: 2;
}

.card-list dd{
    padding-bottom: 2rem;
    margin: 0;
}


 .card-list dd{
     
    figure[class$="-sns"]{ 
    max-width: 1200px;
    width: 100%;}


    figure[class$="-mail"]{
    max-width: 600px;
    width: 100%;
    }

    figure[class$="-news1"]{
    max-width: 1080px;
    width: 100%;
    }

    figure[class$="-news2"]{
    max-width: 300px;
    width: 100%;
    }

    figure[class$="-news3"]{
    max-width: 1940px;
    width: 100%;
    }

    figure[class$="-news4"]{
    max-width: 980px;
    width: 100%;
    }

    figure[class$="-news5"]{
    max-width: 640px;
    width: 100%;
    }

}

.mv01 .slide-title.coler-base{color: #00ABEF;}