@charset "UTF-8";

body    {margin: 0;
        font-family: 'Noto Serif JP', serif; }

.sitename   {padding-top: 20px;
            text-align: center}

.header     {width: 100%;
            height: auto;
            vertical-align: bottom;
            padding-top: 20px}

.obi {width: 500px;
  margin: 0 auto;
  padding: 10px 0;
  font-family: sans-serif;
  font-size: 20px;
  color:#555;}
  
.midashi01 {margin: 10px 0}

.obi01 .midashi01 {padding: 15px 5px;
  margin: 10px -20px;
  border: solid 3px #555;
  position:relative;
  text-align: center;
  border-radius: 3px;
  background: #fff;}
  
.obi01 .midashi01:after,
.obi01 .midashi01:before {content: '';
  position: absolute;
  bottom: -7px;
  background: #555;
  border: solid 2px #555;
  width: 25px;
  height: 20px;
  z-index: -1;}
  
.obi01 .midashi01:after {left: 2px;
     transform: rotate(120deg);}
     
.obi01 .midashi01:before {right: 2px;
    transform: rotate(60deg);}

.pickup     {padding: 50px 30px;
            text-align: center}

.news       {padding: 50px 0;}
            
.pickup img {width: 100%;
             height: auto;
             vertical-align: bottom}
             
.news img     {width: 60%;
                height: auto;
                vertical-align: bottom}
.news p     {text-align: center;
            font-size: 24px}
                
.howto      {text-align: center}                
.howto p       {font-size: 24px;
                text-align: left}
                
.mimi       {margin: 0;
            padding: 30px}
                
.mimi img      {width: 300px;
                height: 300px;
                Border-radius:50%;
                border: solid;
                color: #555;}
                
.mimiballoon     {position: relative;
                display: inline-block;
                margin: 1.5em 0 1.5em 15px;
                padding: 7px 10px;
                min-width: 120px;
                max-width: 100%;
                color: #555;
                font-size: 16px;
                background: #FFF;
                border: solid 3px #555;
                box-sizing: border-box;}
.mimiballoon:before { content: "";
                    position: absolute;
                    top: 50%;
                    left: -24px;
                    margin-top: -12px;
                    border: 12px solid transparent;
                    border-right: 12px solid #FFF;
                    z-index: 2;}
.mimiballoon:after {content: "";
                    position: absolute;
                    top: 50%;
                    left: -30px;
                    margin-top: -14px;
                    border: 14px solid transparent;
                    border-right: 14px solid #555;
                    z-index: 1;}
.mimiballoon p {margin: 0;
              padding: 20px;}
              
.goro       {margin: 0;
            padding: 30px}
              
.goro img      {width: 300px;
                height: 300px;
                Border-radius:50%;
                border: solid;
                color: #555;}
                
.goroballoon {position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;}

.goroballoon:before {content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;}
  
.goroballoon:after {content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;}

.goroballoon p {
  margin: 0;
  padding: 20px;}
                    

/* グリッド */
body    {display: grid;
        grid-template-columns: [left] minmax(20px, 1fr) [main]minmax(auto, 1280px) [main-end]minmax(20px, 1fr) [right];
        grid-template-rows: [head]auto [head]auto [img]auto [pickup]auto [howto]auto [sns]auto [foot]auto [bottom]auto }
        
.sitename   {grid-column-start: main;
            grid-row-start: head}
            
.header     {grid-column-start: left;
            grid-column-end: right;
            grid-row-start: img}
            
.pickup      {grid-column-start: main;
            grid-row-start: pickup;}
            
.news       {display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-column-gap: 20px}
            
.howto      {grid-column-start: main;
            grid-column-end: main-end;
            grid-row-start: howto}
            
.mimi       {display: grid;
            grid-template-columns: 1fr 5fr;
            grid-template-rows: auto;
            grid-row-gap:0}
            
.goro       {display: grid;
            grid-template-columns: 5fr 1fr;
            grid-template-rows: auto;
            grid-row-gap:0}
            
.copyright   {grid-column-start: main;
            grid-row-start: foot}