@charset "utf-8";

/* @group Reset */

*{ margin: 0;padding: 0}

a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}

/* @end */


/* @group Fluid-img */

img { max-width : 100%;
 border-radius: 15px;
}

/* @end */


/* @group HTML */
/*Ten Mincho Regular*/
html{
font-family: "ten-mincho", serif;
font-weight: 400;
font-style: normal;
color: #5c5b5b;
background: #f4ecde;
webkit-font-smoothing:antialiased;
}




/*
html {
font-family : verdana, sans-serif;
font-size : 75%; レスポンシブタイプセッティングの指定
line-height : 1.5
}/

/* @end */



/* @group Heading */

h1 {
font-size : 3em; /* 48px */
line-height : 1; /* 48px */
margin-bottom : 0.5em } 

h2 {
font-size : 2.25em; /* 36px */
line-height : 1.3333; /* 48px */
margin-bottom : 0.6667em } 

h3 {
font-size : 1.5em; /* 24px */
line-height : 1.5; /* 24px */
margin-bottom : 1em } 

hgroup h2,h4,h5,h6 {
font-size : 1.2em; /* 16px */
line-height : 1.5; /* 24px */
margin-bottom : 1.5em } 

/* @end */

/* @group Header */

header { 
text-align : center;
padding-top : 1.5em;
background : #db958b;
margin-bottom: 3em;}

header h1 { margin-bottom : 0.5em;
color : #fff;
}
header h2 { color : #fff}

.c-header {
  align-items: center;
  background-color: #db958b; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}



.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  color: #fff; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0px; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #eeeeee; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}

@media screen and (max-width: 750px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}
@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #db958b; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

.c-hamburger-menu__button-mark {
  background-color: #fff; /* カスタマイズしてください */
  display: block;
  height: 4px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 30px; /* カスタマイズしてください */
}

@media screen and (max-width: 750px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}

/* @end */



/* @group Contents */

#contents {
width : 90%;
margin : 0 auto;
text-align : center;

}

#contents p { 
margin-bottom : 1.5em;
text-align : left}


#contents img { 
margin-bottom : 1.5em; }
/*box-shadow : 0 0 4px #5c5b5b;/




/* @end */

section {
margin-top : 5em;
margin-bottom : 5em;
}

section img{
margin-top : 5em;
margin-bottom : 5em;
border-radius: 15px;
}



@media only screen and (min-width: 480px){


.key-visual{
top: 6.7em;
height: 252px;
background: url(https://uroko-suimei.com/assets/images/header_sityusuimei_480.jpg) top center no-repeat;
border-radius: 15px;
}

.dotop2{
top: 6.7em;
height: 252px;
background: url(https://uroko-suimei.com/assets/images/mori480x.jpgg) top center no-repeat;
}

.suimeib{
top: 6.7em;
height: 252px;
background: url(https://uroko-suimei.com/assets/images/gogyo480.jpg) top center no-repeat;
}

.key-visual img{ visibility: hidden;}

.dotop2 img{ visibility: hidden;}

.suimeib img{ visibility: hidden;}

/* 図表のサイズは320pxなので、キャプションもそれ以上に広がらないようにする */
.topcase figcaption{max-width: 320px;
margin: 0 auto}

/* @end */

}

@media only screen and (min-width: 768px){

.key-visual{
position:static;/* 絶対配置を解除 */
height: 216px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/header_sityusuimei_768.jpg) top center no-repeat;
border-radius: 15px;
}

.dotop2{
position:static;/* 絶対配置を解除 */
height: 216px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/mori768.jpg) top center no-repeat;
border-radius: 15px;
}

.suimeib{
position:static;/* 絶対配置を解除 */
height: 216px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/gogyo768.jpg) top center no-repeat;
border-radius: 15px;
}

@media only screen and (min-width: 992px){

.key-visual{
position:static;/* 絶対配置を解除 */
height: 288px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/header_sityusuimei_1024.jpg) top center no-repeat;
border-radius: 15px;
}

.dotop2{
position:static;/* 絶対配置を解除 */
height: 288px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/mori1024.jpg) top center no-repeat;
border-radius: 15px;
}

.suimeib{
position:static;/* 絶対配置を解除 */
height: 288px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/gogyo1024.jpg) top center no-repeat;
border-radius: 15px;
}

@media only screen and (min-width: 1200px){

.key-visual{
position:static;/* 絶対配置を解除 */
height: 500px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/header_sityusuimei1200.jpg) top center no-repeat;
border-radius: 15px;
}

.dotop2{
position:static;/* 絶対配置を解除 */
height: 500px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/mori1200.jpg) top center no-repeat;
border-radius: 15px;
}


.suimeib{
position:static;/* 絶対配置を解除 */
height: 500px;
margin:0 0 3em;
background: url(https://uroko-suimei.com/assets/images/gogyo1200.jpg) top center no-repeat;
border-radius: 15px;
}
/* @group contents */



.pageheader div.cf{margin: 0 auto}

.pageheader h1{
float: left;
height:auto;
margin-bottom:1.5rem;
}







/*768px*/
@media screen and (min-width : 768px){

html{ font-size : 87.5%} /*レスポンシブタイプセッティングの指定*/
#contents { text-align : center;}

}

/*1024px*/
@media screen and (min-width : 1024px) {

html{ font-size : 100%} /*レスポンシブタイプセッティングの指定*/

/* @group Nav */


/* @end */

/* @group Contents */

#contents {
overflow : hidden;
width : 93.75%}

#contents #main { 
float : left;
margin : 0 1.0416667%; } 


#contents #main { width : 100%;}
/*
#contents #sub { width : 31.25%}*/



/* @group Footer */

/* コンテンツのフッダー部分 */



footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto;
}


/* @end */